FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

Tricky Javascript Problem

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


garionw
I have the following Javascript code that doesn't seem to work:

Code:

 <script language="javascript">
  function switchupdown($i){
    if (document.getElementById($i).src == 'images/down.png') document.getElementById($i).src = 'images/up.png';
    else document.getElementById($i).src = 'images/down.png';
  }
 </script>

 ....

 <span id="Name" onclick="switchupdown('imgname');">Garion <img src="images/down.png" alt="down" id="imgname" /></span>


No matter what I try or what I do, I can't seem to get it to work in either FF or IE6. If I change the image to a div, and change the src to innerhtml it works fine, but I can't change the image srcs (While in an if statement - If it isn't in an if statement, it works fine, but only one way which defeats the purpose of it)

Thanks for any help anyone has
- Garion
varun_dodla
One problem why you are not able to do this is because is that once the page loads the image source is no more 'images/down.png' because it changes to the complete URL with the base location something like 'http://www.yoursite.com/images/down.png' .
You can verify this by right clicking on the image and seeing its properties or doing an alert of the src attribute from javascript.

The alternate way to achieve this would be to do it this way:

Code:

<script language="javascript">
  function switchupdown($i){
    if (document.getElementById($i).src.indexOf("down.png") != -1 ) document.getElementById($i).src = 'images/up.png';
    else document.getElementById($i).src = 'images/down.png';
  }
 </script>

 ....

 <span id="Name" onclick="switchupdown('imgname');">Garion <img src="images/down.png" alt="down" id="imgname" /></span>


Hope this helps.
DanielXP
javascript variables do not use $

Replace "$i" with "i"
welshsteve
Hi garionw

I assume by your code, you are trying to get a mouseover effect by changing the image. Here's a quick example using three image files:

imgOut.jpg for the normal image
imgOver.jpg for when the mouse moves over it
imgClicked.jpg for when you click the image

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

   <title>CODE - Image Array for changing images for mouse events</title>

   <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />

   <script type="text/javascript">
   if(document.images){
      imgButton=new Array();
      imgButton["mouseout"]=new Image(80,25);
      imgButton["mouseover"]=new Image(80,25);
      imgButton["click"]=new Image(80,25);
      //set image files
      imgButton["mouseout"].src="imgOut.jpg";
      imgButton["mouseover"].src="imgOver.jpg";
      imgButton["click"].src="imgClicked.jpg";
   }
   function changeImage(imageid, imagestate){
      if(document.images){
         document.images[imageid].src=imgButton[imagestate].src;
      }
   }
   </script>
   
</head>

<body>

<a href="javascript:;">
   <img src="imgOut.jpg" style="height:25px;width:80px;border:0;" id="Time" onmouseout="changeImage('Time', 'mouseout');" onmouseover="changeImage('Time', 'mouseover');" onclick="changeImage('Time', 'click');">
</a>

</body>
</html>
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.