SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Evangelist
    Join Date
    Oct 2001
    Posts
    439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how can I swap images in CSS?

    Hi guys,
    Just wondering if anyone knows how I can do this:

    I will have a button:
    and an image displayed on the page.

    When someone clicks the button, I want the image displayed to change to another image. Then when they click the button again, it reverts back to the original image.......(kind of a slideshow type thing)

    thanks

  2. #2
    busy Steelsun's Avatar
    Join Date
    Mar 2001
    Location
    Houston, Tejas; Future Capital of the World
    Posts
    2,474
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's not CSS, it's Javascript.

    Do a search for Javascript and Rollover
    It's actually very simple, and most webdesign software (like Dreamweaver, etal.) will do the code automatically for you (do a search of their help section for rollover)
    Brian Poirier
    SunStockPhoto: Stock Photos, Fine Art Photos, Event Photography

  3. #3
    SitePoint Evangelist
    Join Date
    Oct 2001
    Posts
    439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks,
    but I specified that I want the images to change on click, not on rollover.......
    And I would like to do it using CSS........but I guess i will need to use dhtml.....

    (I did just implement it with Javascript, but would like to see how else it can be done)

    cheers
    Last edited by mvd; May 26, 2002 at 09:32.

  4. #4
    Grumpy Mole Man Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It is impossible to implement such a system using only CSS (one where you click a button to toggle an image). However, it IS possible to create an effect where an image changes when you hover over another link (and changes back when you move the mouse away) using some very clever CSS. This site demonstrates exactly that effect and shows how it can be avchieved:

    http://www.meyerweb.com/eric/css/edge/popups/demo2.html

    Note: That demo only works in Mozilla / NS6 or IE6 - IE5.5 can't handle it.

    For images that change when you click something your only option is Javascript and the the DOM.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •