FRIHOST • FORUMS • SEARCH • 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>
Related topics
JavaScript problem in IE7
Beginner CSS/Javascript problem.
AdBlock Plus on OS X Javascript Problem
Javascript problem...I think :S
javascript problem
JavaScript Problem
Abortion or Murder?
Help with php and java script		help needed with css & javascript
math problem with javascript
Javascript - can I read a $_SESSION variable passed in URL?
embedding javascript menu simple problem
PHP and cookies. Simple problem.
Menu problem
Navigation Script (javascript) Help Please!
JavaScript confirm() problem		PHP Question
Countdown Javascript with PHP variables
IE 6 problem (bugs me off)
javascript function not being seen
Password problem
problem adding variables in javascript
Java tutorials
Help needed with Javascript and overflow
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.