Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations bkrike on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Mouseover swap 2 images 1

Status
Not open for further replies.
markdmac

markdmac

MIS
Dec 20, 2003
12,340
US
Greetings JavaScriptors. I come to you from the vbscript forum as a fish out of water. I know lots about vbscript and very little of javascript.

My searches online tell me that javascript is the best tool to use for creating a function to swap out an image on a web page and I have found a few examples that do work for me.

But here is my problem. I have a table with 2 columns. In each column there are 5 rows with 2 images, side by side.I want a mouse over on either one of the images in a row to change both images.

For standardization I have a naming convention such as:

Image IDs are SpecialEventsNav.gif and SpecialEventsTxt.gif

The image files have a standard too:

SpecialEventsNavOff.gif and SpecialEventsTxtOff.gif

The mouseover values would be:
SpecialEventsNav_On.gif and SpecialEventsTxt_On.gif

So here is my pseudo code of how I think this should be processed.

1. First need to get the button info, something like
Name = Left(id,Len(id)-10)
which should return "SpecialEvents" in this case.

2. Switch image values
Mouse on value => Name+"Nav" src= Name + "Nav_On.gif"
Mouse on value => Name+"Txt" src= Name + "Txt_On.gif"

3. On mouseout switch back
Mouse on value => Name+"Nav" src= Name + "NavOff.gif"
Mouse on value => Name+"Txt" src= Name + "TxtOff.gif"

So the question is can anyone assist this javaScript rookie with a proper function that could do this?

Thanks in advance

Mark







 
Sort by date Sort by votes
There a number of ways to do it, here is one.
I know there is a way to do it without using the eval statment but I cannot remember it off the top of my head.
Code: 
<html>
<head>

<SCRIPT type="text/javascript">
<!--

var SpecialEventsNav_On = new Image();
  SpecialEventsNav_On.src = "SpecialEventsNavOn.jpg";
var SpecialEventsNav_Off = new Image();
  SpecialEventsNav_Off.src = "SpecialEventsNavOff.jpg";
var SpecialEventsTxt_On = new Image();
  SpecialEventsTxt_On.src = "SpecialEventsTxtOn.jpg";
var SpecialEventsTxt_Off = new Image();
  SpecialEventsTxt_Off.src = "SpecialEventsTxtOff.jpg";

function imgChange(which,state) {
  document.getElementById(which+'Nav').src = eval(which+'Nav_'+state+'.src');
  document.getElementById(which+'Txt').src = eval(which+'Nav_'+state+'.src');
}
-->
</SCRIPT>
</HEAD>
<body>
<a href="#" onMouseOver="imgChange('SpecialEvents','On');" onmouseout="imgChange('SpecialEvents','Off');">
  <img src="SpecialEventsNavOff.jpg" id="SpecialEventsNav" name="SpecialEventsNav" border=0></a><br>
<a href="#" onMouseOver="imgChange('SpecialEvents','On');" onMouseOut="imgChange('SpecialEvents','Off');">
  <img src="SpecialEventsTxtOff.jpg" id="SpecialEventsTxt" name="SpecialEventsTxt" border=0>
</a>
</body>
</html>


It's hard to think outside the box when I'm trapped in a cubicle.
 
Upvote 0 Downvote
Ok, this works great but I have one follow up question for you. the images don't load until I mouseover. How can I go about doing a preload for the images. I tried the following example I found but it does not seem to be doing the trick.

Code: 
<SCRIPT LANGUAGE = JAVASCRIPT>
if (document.images) 
{
   camon = new Image();
   camoff = new Image();
   camon.src = "images/camon.gif";
   camoff.src = "images/camoff.gif"
}
</SCRIPT>

I hope you find this post helpful.

Regards,

Mark

Check out my scripting solutions at
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lupidol
  • Locked
  • Question
Alternate images not working
Replies
2
Views
165
lupidol
lupidol
c0deM0nK424
  • Locked
  • Question
auto detect viewport or screen size and load different images for flexslider carosel ?
Replies
0
Views
173
c0deM0nK424
c0deM0nK424
BrotherArnold
  • Locked
  • Question
Mouseover div problem with swapping images
Replies
2
Views
138
BrotherArnold
BrotherArnold
User908
  • Locked
  • Question
Javascript Image zoom in on mouseover and zoom out on mouseout
Replies
2
Views
178
User908
User908
emozley
  • Locked
  • Question
Inserting images with jQuery
Replies
0
Views
121
emozley
emozley

Part and Inventory Search

Sponsor

Back
Top