single icon for multiple rollover instances

@kristinachildsDec 27.2006

I searched the archive and was unable to pull anything. Forgive me if this is a double-post.

I am trying to create an interactive menu for my graphics portfolio. I can create a rollover image in a snap, however I would like to create a hotspot image that causes two images to change. One is the image of the same size and location, the other is in another cell.

I can’t find any [complete] tutorials on the web for this. Many have almost all the information, but there is always something key left out, and becuase everyone writes the code a little differently it’s hard for me to follow.

Is anyone able to help me? the page thus far is here: ~~[url]~~http://www.kristinachilds.com/graphics[/url] i haven’t added the preload code in there yet, so you’ll have to hang the mouse over the letters for a moment to facillitate the rollover

and for convienence, the style sheet is here: ~~[url]~~http://www.kristinachilds.com/graphics/style.css[/url]

image examples:
before – ~~[url]~~http://www.kristinachilds.com/graphics/cold.gif[/url]
after – ~~[url]~~http://www.kristinachilds.com/graphics/hot.gif[/url]

to post a comment

JavaScript

5 Comments(s) _↴

@OverstatementDec 27.2006 — #Well, there is the confusing, less work, super cool, less flexible [URL=http://www.cssplay.co.uk/menu/gallery4.html]CSS way[/URL].

Or there is the Javascript way. You would throw everything you want to change into a div, assign an id to that div and modify it in Javascript in response to on* events of your buttons.

[CODE]
 <html>
 <head>
 <title> Example </title>
 <script type="text/javascript">
 function ChangeTextColour(DivId, Colour)
 {
 var Div= document.getElementById(DivId);
 if(Colour == null)
 Div.style.color = 'black';
 else
 Div.style.color = Colour;
 }
 </script>
 </head>
 <body>
 <a href="#" onMouseOver="ChangeTextColour('TargetDiv', 'red')" onMouseOut="ChangeTextColour('TargetDiv', null)"> Change to Red </a>
 <a href="#" onMouseOver="ChangeTextColour('TargetDiv', 'blue')" onMouseOut="ChangeTextColour('TargetDiv', null)"> Change to Blue</a>
 <a href="#" onMouseOver="ChangeTextColour('TargetDiv', 'green')" onMouseOut="ChangeTextColour('TargetDiv', null)"> Change to Green </a>
 <div id="TargetDiv"> I should change colours (cross fingers)</div>
 </body>
 </html>
 [/code]

Of course, you don't have to change the text colour. You could do anything with that.

Addition: You can call two functions for the same event. There is no reason why you can't use my ChangeTextColour function AND your swap function.

 &lt;a href="#" onmouseover="swap(this.firstChild); ChangeTextColour('TargetDiv', 'Yellow');" onmouseout="swap(this.firstChild); ChangeTextColour('TargetDiv', 'black');"&gt;&lt;img src="Picture.JPEG" /&gt;&lt;/a&gt;

@kristinachildsauthorDec 27.2006 — #that's kindof helpful, but it doesn't really address the need for one function to call two actions. it's not a color change, either, it's an image swap (this look can't be acheived with text)

the above code /could/ be a solution if it would change the text /content/ as well as swap the main menu image.

i actually tried (and failed) at writing a function that would swap an image as well as show a div layer (div layer is still written in the style sheet).

regarding that, here's a side question: is one solution preferred over the other due to browser compatability? (eg javascript swap vs div layer show/hide)

@kristinachildsauthorDec 27.2006 — #okay, so i tried this but it doesn't seem to work.

FUNTION:

<script language="JavaScript" type="text/javascript">

</script>

HYPERLINK:

<a href="about.html"><img src="images/about_menu_cold.jpg" border="0" id="about_menu" onMouseOver="swap('about','hot');" onMouseOut="swap('about','cold');"/></a>

2ND CELL:

<img src="images/about_block_cold.jpg" id="about_block">

@OverstatementDec 27.2006 — #If you want to change an image, just give it an id
[CODE]<img id="TargetImg" src="Whatever.JPEG" />[/CODE]
and look it up in Javascript

[CODE]
 <script type="text/javascript">
 function ChangeImage(ImgName, NewImgPath)
 {
 var Image = document.getElementById(ImgName);
 Image.src = NewImgPath;
 }
 </script>
 [/CODE]

And call the function in your buttons

[CODE]
 <a href="#" onMouseOver="ChangeImage('TargetImg', 'Whatever2.JPEG')">Mouseover me to see new image</a>
 [/CODE]

As for the second question, I'm sure since I'm kinda new to Javascript but I would guess that Javascript is more compatible since you could program different paths for each browser but it's probably a lot more work than CSS.

Not sure what you mean by using one function to call two actions. I assume you mean switch the button image as well as the centre image. Again, you can stick to your old way of switching button images and also call this new function (it was the addition from my last post).

Also don't know what you mean by 'text content'. Which texts are you refering too?

Edit: First, I think document.all is Internet Explorer only.

Second, to access an element of an array, you use square brackets ([]), not the other thing (())

@kristinachildsauthorDec 27.2006 — #FIXED!!!

okay, for all you poor suckers out there having the same problem as me, here is the solution:

post this function in your <head> tags:

<script language="JavaScript" type="text/javascript">

</script>

in order for this to work correctly, your image type will have to be correct, so make sure your menu item is a .jpg and your secondary image is a .gif (you can also change the file extension in the function to match your image type: .png, .bmp, whatever... as long as both the "cold" and "hot" images are the same type).

note: notice that it says src = "images/" + title + "_menu_" + hotCold + ".jpg"; this function only works because all of my images are in a folder titled "images". this code tells the funtion exactly where to pull the image from and what to call it.
---

this is the link code to use in the main menu (the identically sized images that are to swap)

<a href="#"><img [color=red]src="images/about_menu_cold.jpg"[/color] border="0" [color=blue]id="about_menu"[/color] [color=orange]onMouseOver="swap('about','hot');"[/color] [color=purple]onMouseOut="swap('about','cold');"[/color] /></a>

to break it down peice by peice:

[color=red]src="images/about_menu_cold.jpg"[/color]

this is the image that will be seen when the pages loads. this is how my code looks, but yours may look like src="myimage.jpg" or src="../blah/something.jpg" depending on where the file lies in your file heirarchy.

[color=blue]id="about_menu"[/color]

this confused me at first, but really it's just calling out part of the funtion above. you don't have to /define/ an id. i've color-coded the part of the function above to help make the connection.

[color=orange]onMouseOver="swap('about','hot');"[/color]

if you directly translated this from the function, it would actually look like this: "swap('title','hot');" make sense? "title" is a variable in the function, and "about" is a value for that variable.

[color=purple]onMouseOut="swap('about','cold');"[/color]

ditto.

---

this is the code to enter as the 2nd image you wish to change. this is technically a rollover and not an image swap:

<img id="about_block" src="images/about_block_cold.gif">

in order for this to work, you must have 2 images: about_block_cold.gif and about_block_hot.gif. the image in the "src=" command will be the image taht is seen upon the initial page load. in this instance, since i didn't want any image to be seen until you rolled over a menu item, "about_block_cold.gif" is actullay a 1x1 pixel transparent gif. as long as you have the title_block_cold and title_block_hot, the image will swap when you rollover the menu item.

---

here is the code in enterity. hopefully seeing it in 'action' will help connect the dots for those non-javascript writers such as myself. i would paste it into a txt document becuase the table in this forum is limited and it won't wrap correctly

YEAH, LEARNING!

<script language="JavaScript" type="text/javascript">

</script>

</HEAD>

<style type="text/css">



</style>

<body background="images/bg-tweed.jpg" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<div id="content">

<center>

<table height="517" width="684" cellpadding="0" cellspacing="0" class="body" border="0">

<tr height=27>

<td colspan="8" height="27"><img src="images/top.jpg "></td>

</tr>

<tr>
   <td height="67" width="28"><img src="images/r1_1.jpg "></td>
   <td width="62"><a href="about.html"><img src="images/about_menu_cold.jpg" border="0" id="about_menu" onMouseOver="swap('about','hot');" onMouseOut="swap('about','cold');" /></a></td>
   <td width"65"><a href="about.html"><img src="images/brochure_menu_cold.jpg" border="0" id="brochure_menu" onMouseOver="swap('brochure','hot');" onMouseOut="swap('brochure','cold');" /></td>
   <td width="91"><a href="about.html"><img src="images/club_menu_cold.jpg" border="0" id="club_menu" onMouseOver="swap('club','hot');" onMouseOut="swap('club','cold');" /></td>
   <td width="402" colspan="3" bgcolor="ffffff">  some stuff </td>
   <td><img src="images/r1_8.jpg "></td>
  </tr>
 
  <tr>
   <td height=73><img src="images/r2_1.jpg "></td>
   <td><a href="about.html"><img src="images/print_menu_cold.jpg" border="0" id="print_menu" onMouseOver="swap('print','hot');" onMouseOut="swap('print','cold');" /></a></td>
   <td><a href="about.html"><img src="images/resume_menu_cold.jpg" border="0" id="resume_menu" onMouseOver="swap('resume','hot');" onMouseOut="swap('resume','cold');" /></a></td>
   <td><a href="about.html"><img src="images/web_menu_cold.jpg" border="0" id="web_menu" onMouseOver="swap('web','hot');" onMouseOut="swap('web','cold');" /></a></td>
   <td width="402" colspan="3" bgcolor="ffffff" class="list">  some stuff </td>
   <td><img src="images/r2_8.jpg "></td>
  </tr>
 
  <tr>
   <td height=316><img src="images/r3_1.jpg "></td>
   <td colspan="3" bgcolor="ffffff"> &nbsp;</td>
   <td width="58"><img src="images/r3_5.gif "></td>
   <td width="309" bgcolor="ffffff" class="jobs"><center>
   <img id="about_block" src="images/about_block_cold.gif">
   <img id="brochure_block" src="images/brochure_block_cold.gif">
   <img id="club_block" src="images/club_block_cold.gif">
   <img id="print_block" src="images/print_block_cold.gif">
   <img id="resume_block" src="images/resume_block_cold.gif">
   <img id="web_block" src="images/web_block_cold.gif">
   </center> </td>
   <td><img src="images/r3_7.gif "></td>
   <td><img src="images/r3_8.jpg "></td>
  </tr>
 
  <tr>
   <td height=35 colspan="8"><img src="images/bottom.jpg "></td>
  </tr>

</table>

</center>

</div>

Also in #JavaScript _↴

Getting data from another website Change cursor onmouseover Drop Down Navigation

Success!

Help @kristinachilds spread the word by sharing this article on Twitter...

Tweet This

single icon for multiple rollover instances

5 Comments(s) _↴

note: notice that it says src = "images/" + title + "_menu_" + hotCold + ".jpg"; this function only works because all of my images are in a folder titled "images". this code tells the funtion exactly where to pull the image from and what to call it.
---

Also in #JavaScript _↴

Success!

Social

Version

single icon for multiple rollover instances

5 Comments(s) ↴

note: notice that it says src = "images/" + title + "_menu_" + hotCold + ".jpg"; this function only works because all of my images are in a folder titled "images". this code tells the funtion exactly where to pull the image from and what to call it. ---

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

note: notice that it says src = "images/" + title + "_menu_" + hotCold + ".jpg"; this function only works because all of my images are in a folder titled "images". this code tells the funtion exactly where to pull the image from and what to call it.
---

Also in #JavaScript _↴