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 derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Javascript Rollover help 1

Status
Not open for further replies.
ncar35b

ncar35b

Technical User
Joined
Jan 10, 2003
Messages
55
Location
US
Hello, I'm fairly new to javascript and was hoping someone could show me, or point me to some code that does a standard rollover for buttons, but also changes an image in one set area on the screen. For example, there are 6 buttons that all have an 'on' and an 'off' state. When the button is rolled over, the 'on' state would show up and also an image in the upper right hand corner would also change with it.

If anyone can point me to some code that does this or something similar, I'd appreciate it!

Thanks, Josh
 
Sort by date Sort by votes
Well, lotsa folks use the tried, true, and tested "MM_swapImage()" javascript. Look it up and it'll handle your rollovers pretty well. It has a lot of good features, some of which are over-kill (IMHO)... you can also use something like:

Code: 
<html>
<head>
<script type=&quot;text/javascript&quot; language=&quot;javascript&quot;>
// we'll set the default &quot;top&quot; image here...
var topImgDef = &quot;/images/default.jpg&quot;
var currBtnID = '';
function imgSwap(btnID, newImg, topImg){
  if (btnID == currBtnID) return true;
  currBtnID = btnID;
  document.getElementById(btnID).src = newImg;
  document.getElementById('topPicture').src = topImg;
}
</script>
</head>
<body>
<img id=&quot;topPicture&quot; src=&quot;/images/default.jpg&quot;>
<img id=&quot;btn1&quot; src=&quot;btn1.jpg&quot; onmouseover=&quot;imgSwap(this.id,'btn1_hi.jpg','topPic1.jpg');&quot; onmouseout=&quot;imgSwap(this.id,'btn1.jpg',topImgDef);&quot;>
<img id=&quot;btn2&quot; src=&quot;btn2.jpg&quot; onmouseover=&quot;imgSwap(this.id,'btn2_hi.jpg','topPic2.jpg');&quot; onmouseout=&quot;imgSwap(this.id,'btn2.jpg',topImgDef);&quot;>
<img id=&quot;btn3&quot; src=&quot;btn3.jpg&quot; onmouseover=&quot;imgSwap(this.id,'btn3_hi.jpg','topPic3.jpg');&quot; onmouseout=&quot;imgSwap(this.id,'btn3.jpg',topImgDef);&quot;>
</body>
</html>

...something like that oughta work...
 
Upvote 0 Downvote
Oops. Sorry 'bout that... dang.

I was exiting the function whenever the ID matched the previous ID... which rather precludes anything happening on mouseout... this should work.

Please note: this is written on the fly, it could, undoubtedly, be made more efficient.

Code: 
<html>
<head>
<script type=&quot;text/javascript&quot; language=&quot;javascript&quot;>
// we'll set the default &quot;top&quot; image here...
var topImgDef = &quot;/images/profile/text_blank.gif&quot;
var currBtnID = '';
function imgSwap(onoff, btnID, newImg, topImg){
  if ((onoff=='on')&&(btnID == currBtnID)) return true;
  currBtnID = (onoff == 'on') ? btnID:'';
  document.getElementById(btnID).src = newImg;
  document.getElementById('topPicture').src = topImg;
}
</script>
</head>
<body>
<img id=&quot;topPicture&quot; src=&quot;images/profile/text_blank.gif&quot;>

<img id=&quot;btn1&quot; src=&quot;images/profile/off_one.jpg&quot; onmouseover=&quot;imgSwap('on',this.id,'images/profile/on_one.jpg','images/profile/text_one.gif');&quot; onmouseout=&quot;imgSwap('off',this.id,'images/profile/off_one.jpg',topImgDef);&quot;>

<img id=&quot;btn2&quot; src=&quot;images/profile/off_two.jpg&quot; onmouseover=&quot;imgSwap('on',this.id,'images/profile/on_two.jpg','images/profile/text_two.gif');&quot; onmouseout=&quot;imgSwap('off',this.id,'images/profile/off_two.jpg',topImgDef);&quot;>

<img id=&quot;btn3&quot; src=&quot;images/profile/off_three.jpg&quot; onmouseover=&quot;imgSwap('on',this.id,'images/profile/on_three.jpg','images/profile/text_three.gif');&quot; onmouseout=&quot;imgSwap('off',this.id,'images/profile/off_three.jpg',topImgDef);&quot;>
</body>
</html>
 
Upvote 0 Downvote
Thanks Mr3Putt, you rock!
 
Upvote 0 Downvote
I'm lucky to occasionally 'pebble'. But thanks.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
1K
lexer
lexer
Mike Lewis
  • Locked
  • Question Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid)
Replies
5
Views
2K
Mike Lewis
Mike Lewis
JScannell
  • Locked
  • Question Question
Javascript events
Replies
1
Views
624
Daniel K
Daniel K
Marclem
  • Locked
  • Question Question
javascript:navigator.registerProtocolHandler
Replies
1
Views
643
Marclem
Marclem
JScannell
  • Locked
  • Question Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
950
JScannell
JScannell

Part and Inventory Search

Sponsor

Back
Top