PDA

View Full Version : server-side imagemap image-swap without javascript

Preacher T
05-05-2006, 06:19 PM
Greetings! I am glad to have finally found a place to ask for coding assistance!! :thumbsup:

So I'm overhauling my site, http://www.stentoriansound.com/, and I have created a server-side imagemap which has my logo and 4 'buttons' linked to my subdomains. The imagemap is working properly as far as I can tell, but I want to make the color of the text in the image change from white to blue using the onMouseOver function.

Can anyone tell me if the OnMouseOver attribute is javascript? I believe I can use it without java but I'm not sure. I do not want any java code on my site, this is not an option.

Is there a way to have my image's colors shift with OnMouseOver without using javascript?

From what I can tell I must define the OnMouseOver in my css script, and then I can reference OnMouseOver for each image swap I need.

I've searched all over for an answer to this, but can not figure out a solution. If you could help point me in the right direction I would be most appreciative!

Here is the image I've created my imagemap for:
http://www.stentoriansound.com/stentorianlogo.jpg

It seems this should be terribly simple; any suggestions?

Cheers!!

- Tony

p.s. I forgot to mention I'm using Adobe GoLive; I created the imagemap with this and then slightly modified the code...
jarrodcf
05-05-2006, 10:34 PM
I'm not sure if this is what you're looking for but...
<a href="http://www.yoursite.com" onMouseOver="document.images['i0'].src='/MouseOverImage.gif'; return true;" onMouseOut="document.images['i0'].src='OriginalImage.gif'"><img src="OriginalImage.gif" width="whatever" height="whatever" border="0" alt="whatever" name="i0"></a>
you may want to break up your image into separated images and put them in a table, that way each link could have its own mouseover image.
Preacher T
05-06-2006, 12:25 AM
jarrod, that looks about right! am I correct that you do not need java for any of those parameters? this is just html, right?

I have to go to work now, but I'll play with it when I get back. any other suggestions or ideas would be great!!

- Tony
harbingerOTV
05-06-2006, 04:49 AM
the example he posted is Javascript. OnMouseAnything is Javascript.

you can try something like this. not a full example and can be cleaned u a lot but maybe it's a step in the direction you want to go.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;

charset=utf-8">
<title>sliding doors</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
}
#header {
width: 690px;
height: 277px;
background: #000 url(stentorian.jpg) top left no-repeat;
position: relative;
}
ul {
top: 160px;
position: absolute;
}
a {
color: #fff;
}
a.sound span {
width: 288px;
height: 49px;
position: absolute;
top: 0;
left: 0;
display: block;
background: transparent url(soundlink.jpg) top left no-repeat;
}
a.sound:hover span {
background-position: 100% 0;
}
</style>
</head>
<body>
<div id="header">
<ul>
<li><a href="#" class="sound">Sound<span></span></a>
</ul>
</div>
</body>

</html>


all css and html ala http://www.alistapart.com sliding doors technique.

images i used are:
Preacher T
05-06-2006, 06:29 AM
the example he posted is Javascript. OnMouseAnything is Javascript.

thanks a lot man! I thought in the back of my mind that this was the case, but I am certainly an amateur. I'll give that code a whirl and see what I can come up with!! I think it would definately help to split the image up and put it in a table; if I can just figure out a way to make the color change when the mouse is atop the image.... I have to find a way so the user knows what they're about to click on!! and I suppose I have personal issues with java, thus my wanting to avoid it like the plague... :p

thanks again harbinger! :thumbsup:

- T