I'd like to change a background image within a div on click

Forum Moderators: open

Message Too Old, No Replies

I'd like to change a background image within a div on click

can anyone advise?

JS_Harris

12:55 am on Nov 21, 2007 (gmt 0)

I have a <div> with a background image set from .css.
I'd like to add 5 or 6 links within the <div> that when pressed change the background image of that <div> to the ones specified in the individual links.

What is the simplest way of doing this with javascript?

lavazza

2:11 am on Nov 21, 2007 (gmt 0)

Not sure if this is THE simplest... but it works...


 <div id="divTest"> 
  <a href="\" onclick="changeClass('divTest');">Lorem ipsum</a> 
 </div> 
 

 function changeClass(myDiv) 
  { 
   document.getElementById(myDiv).className='myNewClassName'; 
  }

JS_Harris

2:43 am on Nov 21, 2007 (gmt 0)

That would work but correct me if I'm wrong...

-If I added multiple links they would all switch to the same background image? I need each link to call its own background.

I tested the code to confirm and also changed the <a href="/" to <a href="#". So close... Any ideas on implementing multiple background images via seperate links?

lavazza

3:20 am on Nov 21, 2007 (gmt 0)

Pass two parameters to the function:


 <div id="divTest">  
 <a href="\" onclick="changeClass('divTest', 'myClass01');">1 Lorem ipsum 1</a>  
 <br> 
 <a href="\" onclick="changeClass('divTest', 'myClass02');">2 Lorem ipsum 2</a>  
 <br> 
 <a href="\" onclick="changeClass('divTest', 'myClass03');">3 Lorem ipsum 3</a>  
 <br> 
 <a href="\" onclick="changeClass('divTest', 'myClass04');">4 Lorem ipsum 4</a>  
 </div>  
 

 function changeClass(myDiv, myClass)  
 {  
 document.getElementById(myDiv).className=myClass;  
 }

Fotiman

3:15 pm on Nov 21, 2007 (gmt 0)

Here's an unobtrusive way to do it, using the Yahoo UI Library.


<!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"> 
<style type="text/css"> 
#divTest ul { 
  list-style: none outside; 
  margin: 0; 
  padding: 0; 
} 
.abc { background-color: #c00; } 
.def { background-color: #0c0; } 
.ghi { background-color: #00c; } 
.jkl { background-color: #eee; } 
</style> 
<title></title> 
</head> 
<body> 
<div id="divTest"> 
  <ul> 
    <li><a href="#" id="abc">1 Lorem ipsum 1</a></li> 
    <li><a href="#" id="def">2 Lorem ipsum 2</a></li> 
    <li><a href="#" id="ghi">3 Lorem ipsum 3</a></li> 
    <li><a href="#" id="jkl">4 Lorem ipsum 4</a></li> 
  </ul> 
</div> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/yahoo-dom-event/yahoo-dom-event.js"></script> 
<script type="text/javascript"> 
YAHOO.util.Event.on(window, 'load', function() { 
  var $E = YAHOO.util.Event; 
  var $D = YAHOO.util.Dom; 
  var linkContainer = document.getElementById('divTest'); 
  var linkIds = ['abc', 'def', 'ghi', 'jkl']; 
  var i, j; 
  for (i = 0; i < linkIds.length; i++) { 
    $E.on(linkIds[i], 'click', function(e) { 
      $E.stopEvent(e); 
      for (j = 0; j < linkIds.length; j++) { 
        $D.replaceClass(linkContainer, linkIds[j], this.id); 
      } 
    }); 
  } 
}); 
</script> 
</body> 
</html>