Don’t laugh, I’m running a temperature, but I’ve promised to work on a project and ran into the following issue.
Oh… Apparently, I’ve stumped myself and another designer. SO, I’ve got an image 850x450 that may need to be image mapped or some type of javascript target to change the middle image on the hover… so there are 6 images of the lady in the middle that go with each of the words/ links.
I’m either thinking image map… or css
CSS, I’ve split the area into 3 division layers. Links in left and right, and then in the middle.
I’m kind of stumped on the css to make the magic happen for the image in the middle to change as I hover from one link to the next. I must be thinking too much into this.
If you look at the image attached to this, you will see that there are 6 words, which are links. Now, the middle image is just one of 6, where each word when hovered over needs to change the middle picture.
However, I have’t done anything like this in years and I don’t dabble in flash.
Anyone have any suggestions. I brought this to my FB timeline last nite and ended up stumping one person.
Then you can absolutely position the parent divs, then absolutely position the image divs so that they all sit in the center of the page. Then you can use :hover to show/hide the image. You’ll need to change the z-index so the other words are not covered by the div that’s being hovered.
div {position:absolute; z-index:1000;}
.image {display:none}
#home:hover{z-index:1}
#home:hover .image {display:block}
etc
If the image isn’t important content then you could simply apply the image as a background to the span. The span is needed to rub out the image that is placed into the frame by default.
Here an example with the images as background-images.
You can put all images together in a “sprite” ([U]this one[/U]), then the images are downloaded simultaneously and instantly present at the hovers. For each item the corresponding part of the sprite is lifted upwards with the background-position property.
The “frame” container as above is not needed now, for the default image can be placed as background-image of the list itself.
The <span>'s in the html are the containers for the hover-images, covering the default image as Paul O’B said already.