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!

Javascript Rollover help 1

Status
Not open for further replies.
ncar35b

ncar35b

Technical User
Jan 10, 2003
55
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
Status
Not open for further replies.

Similar threads

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

Part and Inventory Search

Sponsor

Back
Top