Web Analytics Made Easy -
StatCounter Click on image to change image - CodingForum

Announcement

Collapse
No announcement yet.

Click on image to change image

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Click on image to change image

    Hello
    I have a page which has an image on it, what I want to do is click on that image and that one image will change. I thought I could do this in html/css?
    As I search the forums it seems the use of javascript or php/mysql is being used. I do not have a database. Is it possible to do this using html/css only?
    Thanks

  • #2
    Originally posted by 49sv View Post
    Hello
    I have a page which has an image on it, what I want to do is click on that image and that one image will change. I thought I could do this in html/css?
    As I search the forums it seems the use of javascript or php/mysql is being used. I do not have a database. Is it possible to do this using html/css only?
    Thanks
    hovering? yes... onclick? no. But you do not need php/mysql... infact unless you wanted to do a postback evvery time you changed the pic you wouldnt do it that way anyways... you can simply display/"un"-display images/divs/whatever using javascript... and although I have not tried it, I imagine you may also be able to rewrite the image src path so you do not even have to display/"un"-display.

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

    Comment


    • #3
      I got it working with this. I stacked the two images on top of each other, which made the height 648 and hid one half.

      <style type="text/css">

      #test a {display:block; width:544px; height:324px; overflow:hidden;}

      a:hover img {margin-top:-324px;}

      #test a:hover {zoom:1;}

      </style>

      </head>
      <body>
      <div id="test">
      <a href="#"><img src="img/hovertest.jpg"alt="test"/></a>
      </div>

      </body>
      </html>

      Thanks

      Comment


      • #4
        It looks like what you've done is to affect the hover state, not a clicked state. You cannot change an image into another on a click with just html and css. You'd need to use javascript to change the image. Or even better, use jquery.
        WordPress Designer and theme developer. KlongDesigns - helping bloggers and non-technical folks claim their space on the internet.

        Comment


        • #5
          Following is sample code using inline javascript. make both the images will be of same size, so your layout won't get effected due to images with different size.

          Code:
          <img src="sample1/image1.jpg" width="120" height="120" alt="image" onclick="this.src='sample1/image2.jpg'" />

          Comment


          • #6
            vikram1vicky
            That works out fine,
            Thank you
            Last edited by 49sv; Aug 19, 2011, 12:08 PM. Reason: resolved

            Comment

            Working...
            X