Simple javascript problems

Permalink March 29, 2011 at 3:07 PM

I'm sure there's a much more elegant way of doing this but I'm on a tight deadline and probably just need someone else to take a look at this point. (So I appreciate help in advance).

I made a side navigation that changes the background image in another div on the page when you hover.

Javascript code (right now I just have it in the header of my default.php)

<script language="javascript" type="text/javascript">
   function changeBg(newBg)
      {
    var imgdiv = document.getElementById("mainimg");
    imgdiv.style.backgroundImage = "url(" + newBg + ")";
   }
   </script>

When I made the initial html version this is the side navigation code I used:

<a href="index.html" onmouseover="changeBg('images/photo1.png')" onmouseout="changeBg('images/photo1.png')"><img name="home" src="<?=$this->getThemePath()?>/images/nav-home.png" width="217" height="276" /></a><br />
  <a href="index.html" onmouseover="changeBg('images/photo2.png')" onmouseout="changeBg('images/photo1.png')"><img name="home" src="<?=$this->getThemePath()?>/images/nav-getinvolved.png" width="217" height="66" /></a><br />
  <a href="index.html" onmouseover="changeBg('images/photo3.png')" onmouseout="changeBg('images/photo1.png')"><img name="home" src="<?=$this->getThemePath()?>/images/nav-docs.png" width="217" height="67" /></a><br />
  <a onmouseover="changeBg('images/photo4.png')" onmouseout="changeBg('images/photo1.png')" href="events.html"><img src="<?=$this->getThemePath()?>/images/nav-beheard.png" width="217" height="78" /></a>

Because I can't add get theme path directly to the onmouseover script how do I get C5 to find those images?

If it's helpful here's an html test version:http://www.alta-dev.com/SLOcoastaltrail/...

Forums

Developing (v7+)

Simple javascript problems

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?