GIF/PNG image rollover + href

Placebo

Hey Guys,
can someone help me out with this
have few blob spots, they are gif images, placed around the page using css, position attribute in the <img.. tag.

Obviously if i put a <a href before it, it read the whole dimension of the image and the hand icon appears way before the actual blob.

Do i use image maps? any examples? any easier way ? could i use onclick?

Thanks

im...LOST

You placed it using a position attribute inside the <img> tag? Why don't you try to position it using CSS and then you can wrap the <div> tag with the <href> tag.

Mebby.. :P

Placebo

just done it quickly, i am using css, eg <img src="a.gif" style="etc etc" />

anyway in your case div, even if transparent would be clickable outside the dimensions of the coloured parts. Because its a square.

DonkeyStyle \o/

an image map sounds like the way to go alright

Placebo

thanks
wasted over a day with different techniques , using image map now but rollovers do not work with IE can someone please point me to a javascript script that works with IE

current shape of code:

<area shape="poly" alt="about" coords="1,2,3" href="about.html" 

onmouseout="X" 
onmouseover="X" />

Gordon

I don't really understand what you are doing, can you define the a link as display:block and define the width/height/bg-image position of the a link? If not then do you have more info?

Malice

I'm not sure exactly what the problem you're having actually is so this tutorial might not be any help but I implemented a page design for a client recently using it as a reference.

Basically the client had a diagram on the page where they only wanted part of it clickable. Happily the clickable regions were all rectangular so all I had to do was create a set of rollover images that were positioned onto a background image.

Placebo

HERE
doesnt work with IE

Axwell

Works for me in IE, what version are you trying it in? Works fine for me in IE 6 and IE 7 (I assume its the roll over effect you are talking about)

Placebo

actually, its working fine here in work, so is the lightbox
thats very strange, i had the old one, im assuming it was 6 so i did upgrade and still wasnt working.

Axwell

Check your javascript settings on your machine at home, you might have javascript turned off.