#1
  1. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Sep 2006
    Posts
    660
    Rep Power
    36

    Alternative to iFrame using CSS?


    I am now learning CSS and I usually use iFrames to make dynamic content but I was wondering if there was a CSS equivalent.

    I have a two buttons, that when clicked, will load an image to an iFrame called "window".

    Is there a CSS way to do this?

    Thanks
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    721
    Rep Power
    446
    Yes, though it's not necessarily the best way to do it. It is possible in CSS to say "when you click this, change the background image of this over here", but it depends on how your HTML is set up and what browser you're using. The more common way to change a page without refreshing is to use javascript.

    A quick and dirty way would be something like this:

    Code:
    <div id="myWindow">This will be replaced with an image</div>
    <button id="button1">Image 1</button>
    <button id="button2">Image 2</button>
    
    <script type="text/javascript">
    document.getElementById("button1").onclick=function(){
        swapImage("myimage1.jpg", "image 1 description");
    }
    document.getElementById("button2").onclick=function(){
       swapImage("myimage2.jpg", "image 2 description");
    }
    function swapImage(imagePath, altText){
       document.getElementById("myWindow").innerHTML="<img src='"+imagePath+"' alt='"+altText+"' />";
    }
    </script>

IMN logo majestic logo threadwatch logo seochat tools logo