Changing class on hover and keeping it

RichyRich38 · #1 (**permalink**) 09-23-09, 06:22 AM

Hi guy not the greatest with javascript i use it now and then.

so far i have this code working correctly. Currently on mouse-over its changes the img background of imgholder.

this is the HTML

Code:

<div id="imgholder">
                </div>
            	<div id="myController2">
                           <span class="jFlowControl2">No 1 </span>
                           <span class="jFlowControl2">No 2 </span>
                        </div>
                        <div id="mySlides2">
                           <div>
                           		<a onmouseover="changeImg(this, 'img2.jpg');" class="vm" href="vulnerabiliy.htm" title="Vulnerability Management"></a>
                                <a onmouseover="changeImg(this, 'img3.jpg');" class="grc" href="it_grc.htm" title="IT Governance, Risk and Compliance"></a>
                                <a onmouseover="changeImg(this, 'img4.jpg');" class="pci" href="pci.htm" title="Payment Card Industry Data Security Standard"></a>
                                <a onmouseover="changeImg(this, 'img5.jpg');" class="gcs" href="gcs.htm" title="Government Connect Code of Connection"></a>
                                <a onmouseover="changeImg(this, 'img1.jpg');" class="pt" href="penetration.htm" title="Penetration Testing"> </a>
                                <a onmouseover="changeImg(this, 'img6.jpg');" class="as" href="application.htm" title="Application Security"> </a>
                                <!--span class="jFlowNext2  NextFlash">&nbsp;</span-->
                           </div>
                           <div>
                           		
                               <!--span class="jFlowPrev2 BackFlash">&nbsp;</span-->
                           </div>
                    	</div>
            	</div>

This is the script

Code:

<script language="javascript" type="text/javascript" src="inc/<acronym title="JavaScript">js</acronym>/changeImg.<acronym title="JavaScript">js</acronym>"></script>
function changeImg(e, imgName)
	{ 
		URL_prefix = 'http://www.website.co.uk/surecloud';
		// set image url
		image_url = new Array();
		image_url[0] = URL_prefix+"/images/img1.jpg";
		image_url[1] = URL_prefix+"/images/img2.jpg";
		image_url[2] = URL_prefix+"/images/img3.jpg";
		image_url[3] = URL_prefix+"/images/img4.jpg";
		image_url[4] = URL_prefix+"/images/img5.jpg";
		image_url[5] = URL_prefix+"/images/img6.jpg";
		
		preload_image_object = new Array();
			for(var i = 0; i < image_url.length; i++)
				{
				preload_image_object[i] = new Image();
				preload_image_object[i].src = image_url[i];
				}

	document.getElementById('imgholder') .style.background="transparent url('images/" + imgName + "') no-repeat";
	}

currenly if you hover over any of the <a> a css class is applied

css code

Code:

#flash a.grc:hover {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(../../images/animated_nav.gif) no-repeat scroll -148px -59px;
}

what i need to do is keep this class applied over the last <a> that is hovered.

so what i would like to do is change the class of the last <a> hover so it stays active until another one is hovered.

does this make sense? any help or guidance would be appreciated

wirehopper · #2 (**permalink**) 09-23-09, 06:29 AM

It looks like you're preloading the images on mouseover, and that a:hover is updating the display.

To change the image on mouseover, I'd use something like:

HTML Code:

<a onmouseover="changeImage('image1','newimage.gif');" ... ><img id="image1" /></a>

<script type="text/javascript">
function changeImage(e,i)
{
document.getElementById(e).src=i;
}
</script>

Not tested.

RichyRich38 · #3 (**permalink**) 09-23-09, 06:35 AM

Thank you for the help so far.

But that really not what im after.

I should of posted this link before to help explain
SureCloud ? Vulnerability Management and IT GRC Solutions

if you hover over the buttons at the top they turn from red to blue on hover, and also changes the big image.

when you move of the button they go back to red, I would like to be able to keep the last button that the user was on to be blue? possible

job0107 · #4 (**permalink**) 09-23-09, 12:08 PM

Get rid of the hover parts of your CSS and let's use Javascript to change the CSS instead of trying to figure out how to set it up using CSS classes.

I have defined two arrays that contain all your images.
The first array, image_url(), contains the images you want displayed in your anchor elements.
The second array, animated_image(), contains the images you want to display when you hover over an anchor image.
Change these image names as needed.

In the function changeImg(num,imgName), the variable gif_image contains the background formatting such as 'no-repeat scroll -148px -59px'.
Change these as necessary.

The style section, I added, just to give the anchor elements some dimensions.
You may remove it and use your own style.

HTML Code:

<html>
<head>
<script>
var URL_prefix = 'http://www.website.co.uk/surecloud';
// set image url
var image_url = new Array(
                          URL_prefix+"images/img1.jpg",
                          URL_prefix+"images/img2.jpg",
                          URL_prefix+"images/img3.jpg",
                          URL_prefix+"images/img4.jpg",
                          URL_prefix+"images/img5.jpg",
                          URL_prefix+"images/img6.jpg"
                          );
var animated_image = new Array(
                               "../../images/animated_nav.gif",
                               "../../images/animated_nav.gif",
                               "../../images/animated_nav.gif",
                               "../../images/animated_nav.gif",
                               "../../images/animated_nav.gif",
                               "../../images/animated_nav.gif"
                               );
var obj;
function pre_load_images()
{
 obj = document.getElementById("anchor_container").document.getElementsByTagName("a");
 for(var i=0;i<obj.length;i++){obj[i].style.background="transparent url('"+image_url[i]+"') no-repeat";}
 }
function changeImg(num,imgName)
{
 pre_load_images();
 var gif_image;
 if(num==0){gif_image = "transparent url('"+animated_image[0]+"') no-repeat scroll -148px -59px";}
 if(num==1){gif_image = "transparent url('"+animated_image[1]+"') no-repeat scroll -148px -59px";}
 if(num==2){gif_image = "transparent url('"+animated_image[2]+"') no-repeat scroll -148px -59px";}
 if(num==3){gif_image = "transparent url('"+animated_image[3]+"') no-repeat scroll -148px -59px";}
 if(num==4){gif_image = "transparent url('"+animated_image[4]+"') no-repeat scroll -148px -59px";}
 if(num==5){gif_image = "transparent url('"+animated_image[5]+"') no-repeat scroll -148px -59px";}
 obj[num].style.mozBackgroundClip="border";
 obj[num].style.mozBackgroundInlinePolicy="continuous";
 obj[num].style.mozBackgroundOrigin="padding";
 obj[num].style.background=gif_image;
 document.getElementById('imgholder').style.background="transparent url('"+imgName+"') no-repeat";
 }
</script>
<style>
.vm{width:50px;height:100px;}
.grc{width:50px;height:100px;}
.pci{width:50px;height:100px;}
.gcs{width:50px;height:100px;}
.pt{width:50px;height:100px;}
.as{width:50px;height:100px;}
</style>
</head>
<body onload="pre_load_images();">    
<div id="imgholder" style="height:400px;"></div>
 <div id="myController2">
  <span class="jFlowControl2">No 1 </span>
  <span class="jFlowControl2">No 2 </span>
 </div>
 <div id="mySlides2">
  <div id="anchor_container">
   <a onmouseover="changeImg(0,image_url[0]);" class="vm" href="vulnerabiliy.htm" title="Vulnerability Management"></a>
   <a onmouseover="changeImg(1,image_url[1]);" class="grc" href="it_grc.htm" title="IT Governance, Risk and Compliance"></a>
   <a onmouseover="changeImg(2,image_url[2]);" class="pci" href="pci.htm" title="Payment Card Industry Data Security Standard"></a>
   <a onmouseover="changeImg(3,image_url[3]);" class="gcs" href="gcs.htm" title="Government Connect Code of Connection"></a>
   <a onmouseover="changeImg(4,image_url[4]);" class="pt" href="penetration.htm" title="Penetration Testing"></a>
   <a onmouseover="changeImg(5,image_url[5]);" class="as" href="application.htm" title="Application Security"></a>
   <!--span class="jFlowNext2  NextFlash">&nbsp;</span-->
  </div>
  <div>
   <!--span class="jFlowPrev2 BackFlash">&nbsp;</span-->
  </div>
 </div>
</body>
</html>

RichyRich38 · #5 (**permalink**) 09-24-09, 03:38 AM

Thank you for alll the help so far...

I have tried this code and i think i have amended what is needed, but does not seem to work.

I have debugged with my limted skills.

var image_url seems to work
["http://www.cleverdevelopment.co.uk/surecloudimages/img1.jpg", "http://www.cleverdevelopment.co.uk/surecloudimages/img2.jpg", "http://www.cleverdevelopment.co.uk/surecloudimages/img3.jpg",

var animated_image seems to work
["../../images/animated_nav.gif", "../../images/animated_nav.gif", "../../images/animated_nav.gif", 3 more.

its never seems to get past
function pre_load_images()

code is up and running with debugger; code in if you would like to see http://www.cleverdevelopment.co.uk/surecloud/

wirehopper · #6 (**permalink**) 09-24-09, 06:51 AM

This is a different approach - instead of using the background image, it uses the image tag to display the image. If you want to preload the images, you could just use a hidden div.

HTML Code:

<!-- Hidden div to preload the images -->
<div style="display:none">
<img src="newimage.gif" />
</div>

<a onmouseover="changeImage('image1','newimage.gif');" ... ><img id="image1" src="image.gif" /></a>

<script type="text/javascript">
var last=null;   /* id of the last image element that was changed */
var lasti=null;  /* The src of the last image element */
function changeImage(e,i)
{
/* If there was a last element, in other words, if this isn't the first call to changeImage */
if (last!=null)   
/* Set the image source back to what it was before */
  document.getElementById(last).src=lasti; 
/* Save the image source for this element */
lasti=document.getElementById(e).src;  
/* Set the image source to the new image */
document.getElementById(e).src=i;  
/* Save the id of this element */
last =e;
}
</script>

RichyRich38 · #7 (**permalink**) 09-25-09, 06:47 AM

sorry the link is now at SureCloud ? Vulnerability Management and IT GRC Solutions

wirehopper · #8 (**permalink**) 09-25-09, 09:39 AM

Please post your code.

RichyRich38 · #9 (**permalink**) 09-25-09, 09:46 AM

HI Thanks again for all this, im going to try and get this sorted this weekend..
the javascript

Code:

var URL_prefix = 'http://www.cleverdevelopment.co.uk/surecloud';
// set image url
var image_url = new Array(
                          URL_prefix+"images/img1.jpg",
                          URL_prefix+"images/img2.jpg",
                          URL_prefix+"images/img3.jpg",
                          URL_prefix+"images/img4.jpg",
                          URL_prefix+"images/img5.jpg",
                          URL_prefix+"images/img6.jpg"
                          );
var animated_image = new Array(
                               "../../images/animated_nav.gif",
                               "../../images/animated_nav.gif",
                               "../../images/animated_nav.gif",
                               "../../images/animated_nav.gif",
                               "../../images/animated_nav.gif",
                               "../../images/animated_nav.gif"
                               );
var obj;

function pre_load_images()
{ debugger;
 obj = document.getElementById("anchor_container").document.getElementsByTagName("a");
 for(var i=0;i<obj.length;i++)
 	{obj[i].style.background="transparent url('"+image_url[i]+"') no-repeat";}
 }
 
function changeImg(num,imgName)
{ debugger;
 pre_load_images();
 var gif_image;
 if(num==0){gif_image = "transparent url('"+animated_image[0]+"') no-repeat scroll -148px -59px";}
 if(num==1){gif_image = "transparent url('"+animated_image[1]+"') no-repeat scroll -148px -59px";}
 if(num==2){gif_image = "transparent url('"+animated_image[2]+"') no-repeat scroll -148px -59px";}
 if(num==3){gif_image = "transparent url('"+animated_image[3]+"') no-repeat scroll -148px -59px";}
 if(num==4){gif_image = "transparent url('"+animated_image[4]+"') no-repeat scroll -148px -59px";}
 if(num==5){gif_image = "transparent url('"+animated_image[5]+"') no-repeat scroll -148px -59px";}
 obj[num].style.mozBackgroundClip="border";
 obj[num].style.mozBackgroundInlinePolicy="continuous";
 obj[num].style.mozBackgroundOrigin="padding";
 obj[num].style.background=gif_image;
 document.getElementById('imgholder').style.background="transparent url('"+imgName+"') no-repeat";
 }

The HTML

Code:

<div id="myController2">
                           <span class="jFlowControl2">No 1 </span>
                           <span class="jFlowControl2">No 2 </span>
                        </div>
                        <div id="mySlides2">
                          <div id="anchor_container">
                           
                           <a onmouseover="changeImg(0,image_url[0]);" class="vm" href="vulnerabiliy.htm" title="Vulnerability Management"></a>
                           <a onmouseover="changeImg(1,image_url[1]);" class="grc" href="it_grc.htm" title="IT Governance, Risk and Compliance"></a>

                           <a onmouseover="changeImg(2,image_url[2]);" class="pci" href="pci.htm" title="Payment Card Industry Data Security Standard"></a>
                           <a onmouseover="changeImg(3,image_url[3]);" class="gcs" href="gcs.htm" title="Government Connect Code of Connection"></a>
                           <a onmouseover="changeImg(4,image_url[4]);" class="pt" href="penetration.htm" title="Penetration Testing"></a>
                           <a onmouseover="changeImg(5,image_url[5]);" class="as" href="application.htm" title="Application Security"></a>
                           <!--span class="jFlowNext2  NextFlash">&nbsp;</span-->
                          </div>
                          <div>

                           		
                               <!--span class="jFlowPrev2 BackFlash">&nbsp;</span-->
                           </div>
                    	</div>
            	</div>

job0107 · #10 (**permalink**) 09-26-09, 10:58 AM

Quote:

Originally Posted by RichyRich38

HI Thanks again for all this, im going to try and get this sorted this weekend..
the javascript

Code:

var URL_prefix = 'http://www.cleverdevelopment.co.uk/surecloud';
// set image url
var image_url = new Array(
                          URL_prefix+"images/img1.jpg",
                          URL_prefix+"images/img2.jpg",
                          URL_prefix+"images/img3.jpg",
                          URL_prefix+"images/img4.jpg",
                          URL_prefix+"images/img5.jpg",
                          URL_prefix+"images/img6.jpg"
                          );
var animated_image = new Array(
                               "../../images/animated_nav.gif",
                               "../../images/animated_nav.gif",
                               "../../images/animated_nav.gif",
                               "../../images/animated_nav.gif",
                               "../../images/animated_nav.gif",
                               "../../images/animated_nav.gif"
                               );
var obj;

function pre_load_images()
{ debugger;
 obj = document.getElementById("anchor_container").document.getElementsByTagName("a");
 for(var i=0;i<obj.length;i++)
     {obj[i].style.background="transparent url('"+image_url[i]+"') no-repeat";}
 }
 
function changeImg(num,imgName)
{ debugger;
 pre_load_images();
 var gif_image;
 if(num==0){gif_image = "transparent url('"+animated_image[0]+"') no-repeat scroll -148px -59px";}
 if(num==1){gif_image = "transparent url('"+animated_image[1]+"') no-repeat scroll -148px -59px";}
 if(num==2){gif_image = "transparent url('"+animated_image[2]+"') no-repeat scroll -148px -59px";}
 if(num==3){gif_image = "transparent url('"+animated_image[3]+"') no-repeat scroll -148px -59px";}
 if(num==4){gif_image = "transparent url('"+animated_image[4]+"') no-repeat scroll -148px -59px";}
 if(num==5){gif_image = "transparent url('"+animated_image[5]+"') no-repeat scroll -148px -59px";}
 obj[num].style.mozBackgroundClip="border";
 obj[num].style.mozBackgroundInlinePolicy="continuous";
 obj[num].style.mozBackgroundOrigin="padding";
 obj[num].style.background=gif_image;
 document.getElementById('imgholder').style.background="transparent url('"+imgName+"') no-repeat";
 }

The HTML

Code:

<div id="myController2">
                           <span class="jFlowControl2">No 1 </span>
                           <span class="jFlowControl2">No 2 </span>
                        </div>
                        <div id="mySlides2">
                          <div id="anchor_container">
                           
                           <a onmouseover="changeImg(0,image_url[0]);" class="vm" href="vulnerabiliy.htm" title="Vulnerability Management"></a>
                           <a onmouseover="changeImg(1,image_url[1]);" class="grc" href="it_grc.htm" title="IT Governance, Risk and Compliance"></a>

                           <a onmouseover="changeImg(2,image_url[2]);" class="pci" href="pci.htm" title="Payment Card Industry Data Security Standard"></a>
                           <a onmouseover="changeImg(3,image_url[3]);" class="gcs" href="gcs.htm" title="Government Connect Code of Connection"></a>
                           <a onmouseover="changeImg(4,image_url[4]);" class="pt" href="penetration.htm" title="Penetration Testing"></a>
                           <a onmouseover="changeImg(5,image_url[5]);" class="as" href="application.htm" title="Application Security"></a>
                           <!--span class="jFlowNext2  NextFlash">&nbsp;</span-->
                          </div>
                          <div>

                                   
                               <!--span class="jFlowPrev2 BackFlash">&nbsp;</span-->
                           </div>
                        </div>
                </div>

This Javascript function ( function pre_load_images() ) needs to go into the body elements onload event listener.

HTML Code:

<body onload="pre_load_images();">

Or it needs to be run as the last command in the html.

HTML Code:

<script>
pre_load_images();
</script>
</body>
</html>