Using JS and same image names to perform a mouseover.

[drag0n_45]

Hello all,
This is a simple concept that I'm having a hard time explaining for some reason...

I made a webpage in photoshop, used slices to cut it up, and then saved it for web and devices. I saved three different images - a "normal" image, a mouseover image, and a "current page" image. The slices are going to be used in a navigation bar. However, photoshop doesn't do a mouseover effect - that would need to be added manually.

I saved the normal image in the images directory, and saved the mouseover images to images/mouseover. Saved the current page images to images/current.

I want to add a mouseover effect to a couple of graphics, but I'd like it to be fairly automatic. In other words, I don't much want to add seperate javascript code for each and every graphic, but rather I'd like to be able to add the same code, and have each graphic change relative to the original graphic. Maybe a sub that is passed the type of graphic to display (normal or current) and have some way to detect if the mouse passes over a graphic that calls that function to change it to the mouseover graphic automatically.

The reason I want to do this is because I anticipate the person I'm making the webpage for to want to rearrange a few things, add menu items, etc. He's a very visual person, so I'm trying to make the page before I ask him how he wants it. I figure, if I just need a snippit in each image, it's tons easier.

Any ideas?

The images are stored in three directories relative to the webpage:

[kows]

I'm not sure how you've had a hard time explaining this -- it's just a javascript mouseover. most of this is just done with CSS nowadays, but this is a decent example of how to accomplish what you want to do. you have two events for every anchor (<a>); onmouseover and onmouseout. in the onmouseover event you change the image to the "hover" image, and in the onmouseout event you simply change it back. you'll have to make sure you set the "current" link image as the default for whatever link it is, and then make sure you're changing it back to the current image in the onmouseout event rather than to the regular image.

this seems like such an old, out of date method to me, though. perhaps samba has a more snazzier way of doing it.

[SambaNeko]

perhaps samba has a more snazzier way of doing it.

Maaaaybe... Javascript is not even needed here if you set things up correctly. Please view this image for example. I should make a less-crappy one, but it's 50px wide by 90px tall, and has three variations of the same "button" background: each is 30px tall.

Now here's the sample usage. And code:

<style>
a.button{
  color:#fff;
  line-height:30px;
  text-align:center;
  display:block;
  height:30px;
  width:50px;
  background:url(button-bg.jpg) no-repeat top;
}
a.button:hover{
  background:url(button-bg.jpg) no-repeat 0 -30px;
}
a.button.current{
  background:url(button-bg.jpg) no-repeat 0 -60px;
}
</style>
<a href="#" class="button">Text!</a><br/>
<a href="#" class="button current">Text!</a>

So instead of swapping anything via Javascript, you simply offset the background image position based on what class (or pseudo class) your button has.

[kows]

well, I could have provided that! ;) I meant a snazzier, JavaScript way [assuming there was one]. I would have opted for the CSS approach, too, but I wasn't sure if he had some reason for using JavaScript or not.

anyhow, if you do end up using CSS: make sure you consolidate each link's states into one image. this way, you won't need to worry about pre-loading images or image flickers or anything like that. so, your "about" image would contain the normal, hover and current state -- this will let you do the same thing Samba did with the background-position property.

[SambaNeko]

I meant a snazzier, JavaScript way [assuming there was one].

........ well I guess you could change the background offset with Javascript. I mean if you really want to.....

I don't think I'd do anything different with Javascript than the example you provided (other than remove the event attributes from the HTML for unobtrusiveness, but that's not a functional difference).

[drag0n_45]

Bah da ba ba baaaa I'm lovin it.

Css seems to be the way to go.

I was just thinking of a more centralized way of doing it. i.e. So I don't have to set a mouseover and mouseout image with each image I want to change, and in reality I could just have one function that's added to each image to change it with respect to its name, so that the code used to metamorphesize one image isn't any different than the code for another.