Hover Image

[dwhitesock]

How do I make an image appear in a specified location (to the right of my text) when I hover the text or click on the text. I would like to feature my portfolio this way.

Thank you.

[tedster]

If you want to create a hover behavior, there is a pure-CSS approach that is rather elegant.

1. Create each text selection in its own div, leaving a padding-right
equal to the at least the width of the image you want to see.

2. Alter the image file so it has a "leading" blank or transparent area
to the left - ensuring that the actual image falls into the padding
area of the div.

3. Use this altered image as a background-image in an a:hover rule
for that specific div, and repeat for each div.

If you want an actual onClick behavior, rather than just a hover behavior, then you will need javascript to switch the visibility of a second div on and off. This is often called "show/hide divs" or "show/hide layers".

Our own Javascript Forum [webmasterworld.com] has quite a few posts on the topic. You can use the WebmasterWorld site search [webmasterworld.com] or google it with site:webmasterworld.com included in the search terms.

[dwhitesock]

Tedster, thank you.

I think your second option is the one that I am looking for. I will troll the Java Script section and see what I get.