Rollover image CS4, button needs to stay selected

Toggle sidebar Toggle sidebar
D

dalearyous

Senior member
Jan 8, 2006
836
0
0
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Swap Buttons</title>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('1a.png','2a.png','3a.png','4a.png','5a.png')">
<div style="padding-bottom:10px">
<a href="http://www.google.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nav1','','1a.png',1)"><img src="1.png" name="nav1" width="250" height="84" border="0" id="nav1" /></a><br /></div>
<div style="padding-bottom:10px">
<a href="http://www.google.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nav2','','2a.png',1)"><img src="2.png" name="nav2" width="249" height="84" border="0" id="nav2" /></a><br /></div>
<div style="padding-bottom:10px">
<a href="http://www.google.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nav3','','3a.png',0)"><img src="3.png" name="nav3" width="249" height="83" border="0" id="nav3" /></a><br /></div>
<div style="padding-bottom:10px">
<a href="http://www.google.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nav4','','4a.png',1)"><img src="4.png" name="nav4" width="250" height="85" border="0" id="nav4" /></a><br /></div>
<div style="padding-bottom:10px">
<a href="http://www.google.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nav5','','5a.png',1)"><img src="5.png" name="nav5" width="250" height="84" border="0" id="nav5" /></a></div>
</body>
</html>

that is the code generated by CS4 when you use insert roll over image. it works great, but how do i get it so that the image stays selected?
 
Crusty

Crusty

Lifer
Sep 30, 2001
12,684
2
81
To be clear you want the image only to change when the user puts their mouse over the link and now when the mouse leaves the link area? If so just remove all the onmouseout calls in your hyperlinks.
 
Markbnj

Markbnj

Elite Member <br>Moderator Emeritus
Moderator
Sep 16, 2005
15,682
14
81
www.markbetz.net
That code is set up to swap the image when the mouse enters the element's rectangle (onmouseover), and then swap it back when the mouse leaves the rectangle (onmouseout).

If I understand you correctly, then I think you're going about this the wrong way. You could get rid of the 'onmouseout' event handlers, but then the image would change when you mouse over an element, but not change back. I assume this is not really what you want. It sounds like you want to have a mutually-exclusive selection, and that will require a little more work, i.e. keep track of the newly selected element and set it's image, while setting the image of the previously selected element back to default.

Edit: what Crusty said, but keep in mind the implications. If you just remove the mouse out event handler assignments then eventually all your images will be "selected".
 
D

dalearyous

Senior member
Jan 8, 2006
836
0
0
yeah sorry i wasn't clear.

each button links to a page, when on that page, i would like the button to stay selected (image doesn't switch back to non mouseover state)
 
Markbnj

Markbnj

Elite Member <br>Moderator Emeritus
Moderator
Sep 16, 2005
15,682
14
81
www.markbetz.net
dalearyous said:
yeah sorry i wasn't clear.

each button links to a page, when on that page, i would like the button to stay selected (image doesn't switch back to non mouseover state)
Click to expand...

Ok, that's about what I figured. One important point to note is that you don't need javascript for this at all, and in fact there are some disadvantages to using script for this purpose as opposed to a purely declarative structure.

Here's the main thing: if you have four buttons that each link to a page, then when you build the page that a particular button links to, that button is in the 'selected' state, while the other three are in the 'unselected' state. Typically there is a third state as well, call it 'highlighted', which is what we are discussing here. Two of these states, selected and unselected, are static, i.e. they don't change once a specific page has been built and sent to the browser.

With that in mind I would use CSS. Create two classes, one called .selectedButton, and one called .unselectedButton, and give them the appropriate visual styles. When you build a page set the button elements each to the proper class, i.e. .selectedButton for the one whose 'home page' you are building, and .unselectedButton for the others.

That's all you need to get one visual style for the selected button, and another for the unselected buttons. Now as for the highlight, this is fortunately very easy in CSS. Create a third style with a hover selector...

.unselectedButton:hover { ... }

Give this style the visual attributes you want the highlight to have, background image, border, whatever.

And that's pretty much it. You're done :).

Edit, actually been using jquery too long, you probably have to do that third style class something like

.unselectedButton a:hover { ... }

One of the CSS mavens here will set me straight.
 
Last edited:
U

uclabachelor

Senior member
Nov 9, 2009
448
0
71
dalearyous said:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Swap Buttons</title>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('1a.png','2a.png','3a.png','4a.png','5a.png')">
<div style="padding-bottom:10px">
<a href="http://www.google.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nav1','','1a.png',1)"><img src="1.png" name="nav1" width="250" height="84" border="0" id="nav1" /></a><br /></div>
<div style="padding-bottom:10px">
<a href="http://www.google.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nav2','','2a.png',1)"><img src="2.png" name="nav2" width="249" height="84" border="0" id="nav2" /></a><br /></div>
<div style="padding-bottom:10px">
<a href="http://www.google.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nav3','','3a.png',0)"><img src="3.png" name="nav3" width="249" height="83" border="0" id="nav3" /></a><br /></div>
<div style="padding-bottom:10px">
<a href="http://www.google.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nav4','','4a.png',1)"><img src="4.png" name="nav4" width="250" height="85" border="0" id="nav4" /></a><br /></div>
<div style="padding-bottom:10px">
<a href="http://www.google.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nav5','','5a.png',1)"><img src="5.png" name="nav5" width="250" height="84" border="0" id="nav5" /></a></div>
</body>
</html>

that is the code generated by CS4 when you use insert roll over image. it works great, but how do i get it so that the image stays selected?
Click to expand...

You'll need to add an "onclick" event handler for the <img> tag within the anchor links to swap out the image for one that has a different color.

Or add a border around that image and "onclick", change the border color.
 
You must log in or register to reply here.

TRENDING THREADS

COMPANY
RESOURCES
FOLLOW
Top Bottom