[Total Heckler]

I have moderate experience with HTML and a little CSS and I have been put in charge of creating a website for my wedding.

I have run into a problem, what was asked is a bit over my head and I could REALLY use some help.

The main component I need to make happen is an image that is mapped with 18-20 different things that are click-able that will link to a paypal account where a payment could be made.

I know how to map an image and link them with another site, but I was thinking about zazzing things up a bit by having the mapped part of the image highlight or have another image (a price tag/description) show up when mousing over it.

I have read through a bunch of things today and cannot figure out if its possible to do that on a mapped image.

This is really the only thing I am in charge of for the wedding and I really don't want to fail. Please help!

 

[SkaredShtles]

Someone is settin' you up for FAIL!

 

[Total Heckler]

Thanks for nothing. =]

 

[SkaredShtles]

Thanks for nothing. =]

No problem!

Have you failed yet?

 

[nopoles]

I have a suggestion that may work for you.

Instead of an image map, could you slice the image into several parts and piece them together with a table or DIV/HTML?

If so, you can easily use CSS or Javascript roll-over effects to change the image source on mouse over.

Javascript example:

<a href="http://google.ca">
<img src="original.jpg" onMouseOver="this.src='hover.jpg' onMouseOut='this.src='original.jpg''"></a>

CSS Example:

<style type="text/css">
.image1 {
background: url('original.jpg');
}
.image1:hover {
background: url('hover.jpg');
}
</style>
<div class="image1" onClick="document.location='http://google.ca'">&nbsp;</div>

~Paul

 

[Total Heckler]

Thanks Paul!