Hi every body, i have i simple square div : A with 3 other small divs : x, y and z i want when i hover x or y or z the Photo in the div A CHANGES ... in order to do that (Without using Java Script : Only Html + css), i think about using the normal hover, but this time with partitionning the area over witch the mouse hover ... suppose that we have an area divided with horizontal and vertical axes ... and we want that each time the mouse hover some part, the effect occures in some div ... Can i do that without JS (html + css) Thanks to any usefull help
http://paul.arlott.me/ex/rollover/ shows what you're after or at least a way of achieving it. I've put all the CSS in the HTML to make it easier for you to see all the information.
Many Thanks Tolra ... Really Perfect .... i don't know if i can rate your answer here in this forum ... Thanks Again
Oh ... Tolra, a simple additionnal thing : Your code works pefectly But it does Not contain a default gif ... in other words, i want that if the user remove the mouse from the divs x, y, z, ... a Default gif appears on the div A, and when the user hover x, y, z ... the others gifs appears .. Please note that the gifs may contain Transparency, that means that we can not put them on top of the Default gif without removing this last one.. Many thanks to any help...
Put a default image on the .container class, then for each hover add another element e.g. <b></b> before the <span>, now you can set the b to be a white or other colour area which goes over the default image and the span gets positioned over it so that transparency in the hover image shows the white area rather than the underlying image. Not actually tried it but should work just fine.