0

Hi,

I need to change the image to another image using mouse click...

this is the code

i'm getting forest.jpg image when i clicked over the image in status bar it says "error on page"..what i want is i need to display "dock.jpg,creek.jpg".

pls anyone help me to correct this code.......

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   
      <html xmlns="http://www.w3.org/1999/xhtml"><head>
      
      <title>image slide</title>
  
      <meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
   
      <style type=text/css>
  
      .fade-box
  
      {
   
      width: 359px;
  
      position: absolute;
  
      text-align:center;
  
      }
    
      #image-container
  
      {
  
      width: 359px;
  
      height: 310px;
  
      background-position:center;
  
     background-repeat:no-repeat;
  
      border-style:solid;
  
      border-width:5px;
  
      border-color:#c2cd23;
  
      margin-top: 0px;
  
      margin-right: 0px;
  
      margin-bottom: 0px;
  
      margin-left: 10px;
  
      }
 
      function changeImage(obj)
	{
         obj.src =creek.jpg;      
         obj.src = dock.jpg;       
       }
    
      </style>
  
      </head>
      <body>

     <div id="image-container">

     <div style="" class="fade-box" >

      <a href="#"><img src="Forest.jpg" alt="forest image" width="359" border="0" height="310" onclick=changeImage(this)></a>

      </div>   

      </div>
      </body>

      </html>

Edited by nav33n: Use [code][/code] tags to wrap your code for easy readability.

3
Contributors
4
Replies
5
Views
7 Years
Discussion Span
Last Post by urtrivedi
0

use quotes around

function changeImage(obj)
{
obj.src ="creek.jpg"; 
obj.src = "dock.jpg"; 
}

creek will be ignored and dock will be displayed. why you are doing so?

0
  • Wrap code in [code] [/code] tags to improve readability
  • THERE IS NO JAVASCRIPT
    the javascript that defines the function changeImage() has been placed in <style type='text/css'></style> tags (xhtml QUOTED)
  • javascript not css it belongs in <script type='text/javascript'></script> tags
    there is nothing there that changes the image.
  • <script type='text/javascript'>
    function changeimage(obj) {
     if(obj.src='creek.jpg') {obj.src='dock.jpg';} 
    else {obj.src='creek.jpg';}
    }
    </script>
  • xhtml is stricter than html,
    <img /> not <img>,
    onclick="function" has to be quoted,
    inline javascripts end with a semicolon,
    get rid of the <a></a> around the <img /> it usurps the onclick function

Edited by almostbob: n/a

0

use quotes around

function changeImage(obj)
{
obj.src ="creek.jpg"; 
obj.src = "dock.jpg"; 
}

creek will be ignored and dock will be displayed. why you are doing so?

yes i have tried using quotes also..

but same error.."error on page""

not working

0

Have you tried the solution provided by almostbob.
You need to take out javascript code from css tags and wrap it in script tags.

<script type='text/javascript'>
function changeImage(obj)
{
         obj.src ="creek.jpg"; 
         obj.src = "dock.jpg"; 
}
</script>

Edited by urtrivedi: n/a

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.