Replacing javascript roll overs?

[Seminara]

Hi all

I'd like to handle the 'show/hide layers' in these roll overs by using CSS instead of Javascript. Is this possible?

See Hotel and Layouts columns:

http://kxweb.kineticsolutions.co.uk/Seminara/compare2.html

I'm also wondering if CSS can replace an image map roll over?

See 'View Photos:'

http://kxweb.kineticsolutions.co.uk/Seminara/choose.html

Thanks in advance!

 

[BillyRayPreachersSon]

On the first point, yes, it is technically possible. Whether it would be possible to convert your existing page without too much work, I don't know (I've not looked at your code in depth).

Hope this helps,
Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[glg1]

On the second point - The amount of data that is required for the image map for a single image most likely would make it not something that you would want to move to a style sheet. You may, however move the map to a separate file as shown below. In addition - since the areas defined by the map are specific to a location - unless you had the same exact location for and image and the clicks were then same - its not worth being placed in a separate style sheet.

That said... If your idea is to drive a set of buttons or "clickable areas" and swapping images, then it might be useful to point to a map using css. see

http://www.webreference.com/dhtml/column2/index.html

for ideas. Still from my point of view its easier just to add the same usemap to the attributes of the images you want to display.


<img class = "needMap" src = "/myImage.gif" USEMAP = "#myMap">
//note: you can put the map file in a different file and use "file/name#mapname"

<map name = "myMap"
<area shape = "rect" coords = "x1,y1,x2,y2," href = "myHREF1" />
<area shape = "rect" coords = "x1a,y1a,x2a,y2a" href = "myHREF2" />
</map>

Dan - have you ever run across a image css class with usemap defined? i.e. Given that it is an attribute - it may work.
<style>
.needMap {usemap:#myMap;}

Hope this helps - and if the css does work, let us know...
Cheers,
George

 

[BillyRayPreachersSon]

A quick search on Google for "css image map" showed these great results:

http://www.frankmanno.com/ideas/css-imagemap/

http://www.alistapart.com/articles/imagemap

http://www.cssplay.co.uk/menu/imap.html

http://www.webreference.com/programming/image_map/

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Seminara]

Many thanks for the feedback on the image map question.

However, re. my first question, I thought it would be simpler to allow a roll over of a div (with an a.hover attribute) which then makes another layer appear?

See:

http://kxweb.kineticsolutions.co.uk/Seminara/compare2.html

 

[BabyJeffy]

Seminara, the problem with using CSS to do the hover is that IE doesn't currently support it (IE7 ought to). If that's not a problem for you, then:

#myDiv { background-image:url('blue.gif'); }
#myDiv:hover { background-image:url('red.gif'); }
...
<div id="myDiv">...</div>

Initially the div will have blue.gif in the background - once you roll over it the background image will be red.gif (and when you roll off it returns to blue.gif).

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/

http://www.codecouch.com/jeff/blog/

[/tt]

What is Javascript? FAQ216-6094

 

[BillyRayPreachersSon]

If the image to appear was inside the anchor, it would work fine... and if it was absolutely positioned WRT the anchor, it should be possible in IE with CSS hovers, IMHO.

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]