Skip navigation
nilojones
nilojones
Currently Being Moderated

Is it possible to use check boxes to change images in a div?

Jan 26, 2013 6:29 PM

Tags: #dreamweaver

Hello,

 

I have been searching for hours now all the way back to MX!  And still haven't found a solution,

 

I want the image in my main content div to change (using different images) according to which buttons are checked in the check boxes.   I believe i have to make them transparent and get them to show/ hide according the options used in the check boxes using unique ID's for my images. 

 

Any pointers or tutorials, thanks. v much 

504 Views   5 Replies   Latest reply: nilojones, Jan 28, 2013 8:51 AM
 
Replies
  • Ken Binney
    Currently Being Moderated
    1. Ken Binney,
    Jan 26, 2013 7:47 PM   in reply to nilojones
    Report

    You could use a CSS style switcher like this

     

    http://www.sitepoint.com/css-simple-style-switcher/

     
    |
    Mark as:
  • nilojones
    Currently Being Moderated
    2. nilojones,
    Jan 27, 2013 3:15 AM   in reply to Ken Binney
    Report

    Thanks for the reply

    But i was hoping to do it without SSI (server side includes - not for you but other who see this post), mainly becuase i am learning everything else and that adds one more thing to learn to the list!

     

    But the @import tag is a interesting - i will research that more and see if i can switch the image in a div that has its own class and reference the 'img src' for that div.

     

    Thanks for putting me on the road - let's see where that ends up today.

     

    If i find the answer i will report back how i did it.

     

    Thanks again.

     

    (i will also look at disjointed rollovers that are set according to the checkboxes or radio buttons).

     
    |
    Mark as:
  • nilojones
    Currently Being Moderated
    3. nilojones,
    Jan 27, 2013 3:38 AM   in reply to nilojones
    Report

    Very interesting...

     

    "The @import rule allows you to include external style sheets in your document. It is a way of creating a style sheet within your document, and then importing additional rules into the document."

    "

    You can also include an @import rule in a style sheet with styles:

    <style type="text/css">

       @import url("import3.css");

       p { color : #f00; }

    </style> "                         (http://webdesign.about.com/cs/css/qt/tipcssatimport.htm)

     

    So i am thinking i can import a different style according to the 'button' selection.  For example: If button 1 is checked, import style sheet 1, button is checked import style sheet 2; with each style sheet having a different image or idfferent positioning attributes.

     

    Mission part 2: Anyone know how to direct a button selection to trigger an event - i.e. the @import?

    Thanks.

     

    [edit] there appears to be an issue about page load times and IE using @import: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/  - still hunting

     

    Message was edited by: nilojones

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    4. Nancy O.,
    Jan 27, 2013 12:00 PM   in reply to nilojones
    Report

    The live example below uses JavaScript and an array of background images.  View source to see the code:

    http://alt-web.com/bg-img.html

     

     

    Nancy O.

     
    |
    Mark as:
  • nilojones
    Currently Being Moderated
    5. nilojones,
    Jan 28, 2013 8:51 AM   in reply to Nancy O.
    Report

    And again! You are a shining light in world of gray termihology and (my) computer coding illiteracy.  I will fiddle with that to see if i can adjust it to my needs.  Thank you very much.

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points