Member Avatar for ausmaya

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 because: Use [code][/code] tags to wrap your code for easy readability.
  • 3 Contributors
  • 4 Replies
  • 100 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by urtrivedi
Member Avatar for urtrivedi

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?

Member Avatar for almostbob
  • 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 because: n/a
Member Avatar for ausmaya

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

Member Avatar for urtrivedi

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 because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.