1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 10:26 pm May 13, 2026

Forum Moderators: open

Message Too Old, No Replies

switch backgrounds on mouseover

how do I switch multiple backgrounds on mouseover using a single function?

         

Dacuzz

8:48 pm on Mar 20, 2011 (gmt 0)

10+ Year Member



Hey all,

As a JS rookie I've managed to toggle specific backgrounds on multiple mouseovers. The code below does exactly what I want, but I'm not quite satisfied with the way it's done.

The definite webpage will contain a lot of projectboxes, and for each project I need to add two functions in my script. Not very efficient. I'm looking for a single function which works in the same way, preferably making use of an array where I can add new projectimages. Any help on this would be greatly apprciated! 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Switch backgrounds on mouseover</title>
<style type="text/css">
.projectbox {
margin-right: 15px;
float: left;
}

.imgbox {
width: 265px;
height: 100px;
display: block;
}

.imgbox a.img1_off {
background: url(http://www.boomboxfestival.nl/test3/dummy1_off.jpg) no-repeat;
}

.imgbox a.img1_on {
background: url(http://www.boomboxfestival.nl/test3/dummy1_on.jpg) no-repeat;
}

.imgbox a.img2_off {
background: url(http://www.boomboxfestival.nl/test3/dummy2_off.jpg) no-repeat;
}

.imgbox a.img2_on {
background: url(http://www.boomboxfestival.nl/test3/dummy2_on.jpg) no-repeat;
}

.imgbox a.img3_off {
background: url(http://www.boomboxfestival.nl/test3/dummy3_off.jpg) no-repeat;
}

.imgbox a.img3_on {
background: url(http://www.boomboxfestival.nl/test3/dummy3_on.jpg) no-repeat;
}

.titlebox h1 {
font: 11px/10px Arial, Helvetica, sans-serif;
text-transform: uppercase;
float: left;
margin-right: 3px;
}

.titlebox h1 a {
display: block;
background: #ccc;
color: #fff;
text-decoration: none;
padding: 2px 3px;
}

.titlebox h1 a.title_off {
background: #ccc;
}

.titlebox h1 a.title_on {
background: #000;
}
</style>

<script language="javascript" type="text/javascript">

function switchTitle(objDivID)
{
document.getElementById(objDivID).className = 'title_on';
}

function resetTitle(objDivID)
{
 document.getElementById(objDivID).className = 'title_off';
} 

function switchImage1(objDivID)
{
document.getElementById(objDivID).className = 'img1_on imgbox';
}

function resetImage1(objDivID)
{
 document.getElementById(objDivID).className = 'img1_off imgbox';
}

function switchImage2(objDivID)
{
document.getElementById(objDivID).className = 'img2_on imgbox';
}

function resetImage2(objDivID)
{
 document.getElementById(objDivID).className = 'img2_off imgbox';
}

function switchImage3(objDivID)
{
document.getElementById(objDivID).className = 'img3_on imgbox';
}

function resetImage3(objDivID)
{
 document.getElementById(objDivID).className = 'img3_off imgbox';
}

</script>
</head>

<body>

<div class="projectbox">
 <div class="imgbox">
 <a href="#" id="projectimg1" class="img1_off imgbox" title="Title project 1" 
 onmouseover="switchImage1('projectimg1'); switchTitle('projecttitle1')" 
 onmouseout="resetImage1('projectimg1'); resetTitle('projecttitle1')"></a>
 </div>
 <div class="titlebox">
 <h1><a href="#" id="projecttitle1" class="title_off" 
 onmouseover="switchImage1('projectimg1'); switchTitle('projecttitle1')" 
 onmouseout="resetImage1('projectimg1'); resetTitle('projecttitle1')">Title project 1</a></h1>
 </div>
</div>
<div class="projectbox">
 <div class="imgbox">
 <a href="#" id="projectimg2" class="img2_off imgbox" title="Title project 2" 
 onmouseover="switchImage2('projectimg2'); switchTitle('projecttitle2')" 
 onmouseout="resetImage2('projectimg2'); resetTitle('projecttitle2')"></a>
 </div>
 <div class="titlebox">
 <h1><a href="#" id="projecttitle2" class="title_off" 
 onmouseover="switchImage2('projectimg2'); switchTitle('projecttitle2')" 
 onmouseout="resetImage2('projectimg2'); resetTitle('projecttitle2')">Title project 2</a></h1>
 </div>
</div>
<div class="projectbox">
 <div class="imgbox">
 <a href="#" id="projectimg3" class="img3_off imgbox" title="Title project 3" 
 onmouseover="switchImage3('projectimg3'); switchTitle('projecttitle3')" 
 onmouseout="resetImage3('projectimg3'); resetTitle('projecttitle3')"></a>
 </div>
 <div class="titlebox">
 <h1><a href="#" id="projecttitle3" class="title_off" 
 onmouseover="switchImage3('projectimg3'); switchTitle('projecttitle3')" 
 onmouseout="resetImage3('projectimg3'); resetTitle('projecttitle3')">Title project 3</a></h1>
 </div>
</div>

</body>
</html>

Fotiman

9:38 pm on Mar 20, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Welcome to WebmasterWorld!
Looking at your example, it seems that you should just change your functions to take an additional parameter. 


function switchImage(objDivID, clssName) {
  document.getElementById(objDivID).className = clssName;
}


And likewise for resetImage.

DaCuz

7:51 pm on Mar 21, 2011 (gmt 0)

10+ Year Member



Wow, that simple huh? Thanks a lot for the tip!

For those who'd like to know, I've narrowed the code down to this: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Switch backgrounds on mouseover</title>
<style type="text/css">
.projectbox {
margin-right: 15px;
float: left;
}

.imgbox {
width: 265px;
height: 100px;
display: block;
}

.imgbox a.img1_off {
background: url(http://www.boomboxfestival.nl/test3/dummy1_off.jpg) no-repeat;
}

.imgbox a.img1_on {
background: url(http://www.boomboxfestival.nl/test3/dummy1_on.jpg) no-repeat;
}

.imgbox a.img2_off {
background: url(http://www.boomboxfestival.nl/test3/dummy2_off.jpg) no-repeat;
}

.imgbox a.img2_on {
background: url(http://www.boomboxfestival.nl/test3/dummy2_on.jpg) no-repeat;
}

.imgbox a.img3_off {
background: url(http://www.boomboxfestival.nl/test3/dummy3_off.jpg) no-repeat;
}

.imgbox a.img3_on {
background: url(http://www.boomboxfestival.nl/test3/dummy3_on.jpg) no-repeat;
}

.titlebox h1 {
font: 11px/10px Arial, Helvetica, sans-serif;
text-transform: uppercase;
float: left;
margin-right: 3px;
}

.titlebox h1 a {
display: block;
background: #ccc;
color: #fff;
text-decoration: none;
padding: 2px 3px;
}

.titlebox h1 a.title_off {
background: #ccc;
}

.titlebox h1 a.title_on {
background: #000;
}
</style>

<script language="javascript" type="text/javascript">
function switchClass(objDivID, clssName) {
document.getElementById(objDivID).className = clssName;
}
</script>
</head>

<body>

<div class="projectbox">
 <div class="imgbox">
  <a href="#" id="projectimg1" class="img1_off imgbox" title="Title project 1" 
  onmouseover="switchClass('projectimg1','img1_on imgbox'); switchClass('title1','title_on')" 
  onmouseout="switchClass('projectimg1','img1_off imgbox'); switchClass('title1','title_off')"></a>
 </div>
 <div class="titlebox">
  <h1><a href="#" id="title1" class="title_off" 
  onmouseover="switchClass('projectimg1','img1_on imgbox'); switchClass('title1','title_on')"
  onmouseout="switchClass('projectimg1','img1_off imgbox'); switchClass('title1','title_off')">Title project 1</a></h1>
 </div>
</div>
<div class="projectbox">
 <div class="imgbox">
  <a href="#" id="projectimg2" class="img2_off imgbox" title="Title project 2" 
  onmouseover="switchClass('projectimg2','img2_on imgbox'); switchClass('title2','title_on')" 
  onmouseout="switchClass('projectimg2','img2_off imgbox'); switchClass('title2','title_off')"></a>
 </div>
 <div class="titlebox">
  <h1><a href="#" id="title2" class="title_off" 
  onmouseover="switchClass('projectimg2','img2_on imgbox'); switchClass('title2','title_on')"
  onmouseout="switchClass('projectimg2','img2_off imgbox'); switchClass('title2','title_off')">Title project 2</a></h1>
 </div>
</div>
<div class="projectbox">
 <div class="imgbox">
  <a href="#" id="projectimg3" class="img3_off imgbox" title="Title project 3" 
  onmouseover="switchClass('projectimg3','img3_on imgbox'); switchClass('title3','title_on')"
  onmouseout="switchClass('projectimg3','img3_off imgbox'); switchClass('title3','title_off')"></a>
 </div>
 <div class="titlebox">
  <h1><a href="#" id="title3" class="title_off" 
  onmouseover="switchClass('projectimg3','img3_on imgbox'); switchClass('title3','title_on')"
  onmouseout="switchClass('projectimg3','img3_off imgbox'); switchClass('title3','title_off')">Title project 3</a></h1>
 </div>
</div>

</body>
</html>
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 10:26 pm May 13, 2026