Google Sign in options
Remember me
This is not recommended for shared computers

Privacy Policy
Sign In
Create Account

Javascript Disabled Detected

You currently have javascript disabled. Several functions may not work. Please re-enable javascript to access full functionality.

Subscribe to HRA Now!

SEO Class in Chicago, IL

Learn How To Optimize Your Website on July 26, 2013

Looking for personalized in-depth SEO training among your peers?

High Rankings is offering a 1-day customized SEO training class in Chicago. Class size is limited so please sign-up now if you want in!

Are you a Google Analytics enthusiast?

Share and download Custom Google Analytics Reports, dashboards and advanced segments--for FREE!

www.CustomReportSharing.com

From the folks who brought you High Rankings!

How Do I Use Css Swap Image In Another Position

Started by Directory_SEO , Mar 12 2006 10:59 PM

Next

Please log in to reply

18 replies to this topic

#1 Directory_SEO

HR 4

Active Members
126 posts

Posted 12 March 2006 - 10:59 PM

When I use css for my navigation, i created a navigation menu:

CODE

#nav-menu li a
{
background:#5151ff bottom left repeat-x;
line-height:1.7em;
float: left;
display: block;
border: 0.1em solid #dcdce9;
color:#FFFFFF;
text-decoration: none;
text-align: center;
}
#nav-menu li.FAQ a:hover
{
background-color:#4242FF;
background: url()
}

In this case, when i fill the backgound url, it will only change the image for the FAQ button, but what if I want to change a image in another position, for example, when the mouse over "FAQ" button, I want the image on the right side change to a big "?" image. I don't know if I am making eveything clear here, but see if you can understand and give me some heads-up. Thanks in advance

Back to top

#2 maleman

HR 6

Active Members
677 posts

Posted 13 March 2006 - 01:21 AM

Looks like you to need to use a little scripting to do that. It goes somethin like this:

Try putting an onMouseOver in your FAQ link.

CODE

Back to top

#3 linux_lover

LiLo

Active Members
831 posts

Location:York, UK

Posted 13 March 2006 - 04:51 AM

or you could try this method for pure css image rollovers

Back to top

#4 Directory_SEO

HR 4

Active Members
126 posts

Posted 13 March 2006 - 12:06 PM

thanks very much for your code, i will see if I can make that work

Back to top

#5 RandomFish

HR 1

Members
9 posts

Location:WebDesign: 2 (yahoo)

Posted 13 March 2006 - 03:19 PM

in my mind the full css way works better and doesnt use and js (wich can cause some seo problems if not done correctly)

i did think the whole point of this was to do it with css anyway?

Edited by RandomFish, 13 March 2006 - 03:28 PM.

Back to top

#6 maleman

HR 6

Active Members
677 posts

Posted 13 March 2006 - 05:22 PM

random,

Here's what I took from Jcai's post.

He wants two separate events. A different image on another part of the page to swap in addition to the rollover effect of the link button he hovers over.

Use the CSS for the rollover (which he says works already) and use a script to simutaneously swap the other image onMouseOver.

Back to top

#7 Directory_SEO

HR 4

Active Members
126 posts

Posted 13 March 2006 - 07:02 PM

yes, that's exactly what I meant!! Does CSS support onmouseover function?

Back to top

#8 sweepthelegnate

HR 6

Active Members
903 posts

Location:Dallas, Texas

Posted 13 March 2006 - 07:09 PM

QUOTE(Jcai @ Mar 13 2006, 08:02 PM)

yes, that's exactly what I meant!! Does CSS support onmouseover function?

if you want to do it without javascript check out the link in linux_lover's post.

Back to top

#9 maleman

HR 6

Active Members
677 posts

Posted 14 March 2006 - 12:44 AM

Jcai, please post precisely what you want to do. Explain thoroughly.

onMouseOver is a script thing. hover is CSS.

/* In this case, when i fill the backgound url, it will only change the image for the FAQ button, but what if I want to change a image in another position, for example, when the mouse over "FAQ" button, I want the image on the right side change to a big "?" image. */

The "image on the right side", is this a background image for the li, the a, or an altogether separate image outside of the <ul> tag?

Edited by maleman, 14 March 2006 - 12:57 AM.

Back to top

#10 Directory_SEO

HR 4

Active Members
126 posts

Posted 14 March 2006 - 11:13 AM

sorry, if possible, can i post a link here to the site? if so, Ithink I can explain my point much more clearly. what i meant is that, in css, you can use
a:hover to change the look of the object when you move your mouse over, what about the object in another place, for example, I have 2 buttons, one is "metal bed", another is "wood bed", when the mouse over the button "metal bed", the pic on the right side show a metal bed, and if I move mouse over the "wood bed"button, then on the right side, it will show a wood bed. Can I do this completely in css?

Hopefully this time I am making myself more clear, lol, my eng is improving

Back to top

#11 Jill

High Rankings Advisor

Admin
32,376 posts

Posted 14 March 2006 - 12:04 PM

QUOTE

sorry, if possible, can i post a link here to the site?

Please feel free to put it in a signature, your profile, or to PM it to anyone who is interested in helping.

Back to top

#12 Randy

Convert Me!

Moderator
17,540 posts

Posted 14 March 2006 - 01:18 PM

QUOTE(Jcai)

a:hover to change the look of the object when you move your mouse over, what about the object in another place, for example, I have 2 buttons, one is "metal bed", another is "wood bed", when the mouse over the button "metal bed", the pic on the right side show a metal bed, and if I move mouse over the "wood bed"button, then on the right side, it will show a wood bed. Can I do this completely in css?

The short answer is No.

The longer answer is that in order to accomplish manipulation of an additinal object that is outside of the scope of the trigger object you're going to need some sort of client side scripting. This means Javascript 99% of the time.

Now you could set things up so that your a:hover affects the look of the button strictly through css, then use Javascript as an onMouseover event to do an image swap on the picture. This will have no detrimental SEO effects for sure, and is a completely legitimate use of both.

Back to top

#13 maleman

HR 6

Active Members
677 posts

Posted 14 March 2006 - 05:10 PM

QUOTE

The short answer is No.

Now you could set things up so that your a:hover affects the look of the button strictly through css, then use Javascript as an onMouseover event to do an image swap on the picture.

That's why I posted the script. The short answer here is Use JavaScript and CSS on the same button. Then take a break and have some fun.

It's another one of them CSS vs. "one-thing-or-another" threads. LOL!