60 users online (1 members and 59 guests)  


  Results 1 to 14 of 14

Related

  1. Problem with image rollover and text change    Forum: Javascript Forum
    Replies: 7
  2. How to rollver image to change block of text?    Forum: Javascript Forum
    Replies: 5
  3. how to change text dynamically with image?    Forum: Website Scripts Forum
    Replies: 0
  4. Replies: 0
  1. #1
    ravindarjobs's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Nov 2007
    Location
    india
    Posts
    44

    change image dynamically for div class

    hello friends,
    i am uses styles to make lay out for my page. I crated a div tag and crated two div classes.
    I am trying to set the back ground for the div classes dynamically.
    i have some links in first div class(i.e left one).
    when i place mouse on one of the links, i want to change the back groud image of the right side div(right side box) dynamically)
    how can i achieve this?

    here is my code


    code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <style>
    #left {
    width:702px;
    height:370px;
     
    border:1px;
    margin:0px 0px 0px 170px
    }
    .leftbox {
    width:300px;
    height:400px;
    padding:5px;
    border:1px solid #720B0C;
    float:left;
     
     
    }
    .rightbox {
    width:300px;
    height:400px;
    padding:5px;
    border:1px solid #720B0C;
    float:left;
    background: url(images/bg.jpg)
     
    }
    </style>
    </head>
    <body bgcolor=#F7EDD8>
     
     
    <div id="left">
     
    <div class="leftbox">
    <A HREF="http:\\www.yahoo.com"> 1. ABC</a><br><br>
    <A HREF="http:\\www.yahoo.com"> 2. 123</a><br><br>
    <A HREF="http:\\www.yahoo.com"> 3. XYZ</a><br><br>
     
    </div>
    <div class="rightbox"><p>right</p></div>
    </div>
    </body>
    </html>


    i thought of using onmouseover event. But how do we set image for div class dynamically ?
    Thank you
    Last edited by vinyl-junkie; 12-23-2007 at 12:09 PM. Reason: Added code tags

  2. #2
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: change image dynamically for div class

    Hi there ravindarjobs,

    I have made a few necessary modifications to your original code and added your requested javascript...
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    body {
         background-color:#f7edd8;
     }    
    #left {
        width:624px;
        height:412px;
        margin-left:170px
    }
    #leftbox {
        width:300px;
        height:400px;
        padding:5px;
        border:1px solid #720b0c;
        float:left;
        margin:0;
     }
    #leftbox li {
        margin:10px 0;
     }
    #leftbox li a {
        color:#000;
     }
    #rightbox {
        width:300px;
        height:400px;
        padding:5px;
        border:1px solid #720b0c;
        float:left;
        background-image:url(images/bg.jpg); 
     }
    </style>
    
    <script type="text/javascript">
    
       var obj;
       var preloads=[];
    
    function preload(){
    
    for(c=0;c<arguments.length;c++) {
       preloads[preloads.length]=new Image();
       preloads[preloads.length-1].src=arguments[c];
      }
     }
    preload('images/blood.jpg','images/col.jpg','images/autumn.jpg');
    
    window.onload=function() {
       obj=document.getElementById('rightbox');
       lst=document.getElementById('leftbox').getElementsByTagName('li');
    for(c=0;c<lst.length;c++) {
       lst[c].id=c;
    lst[c].onmouseover=function() {
       swapColor(this,this.id);
       }
      }
     }
    function swapColor(el,num) {
       obj.style.backgroundImage='url('+preloads[num].src+')';
    el.onmouseout=function() {
       obj.style.backgroundImage='url(images/bg.jpg)';
      }
     }
    
    </script>
    
    </head>
    <body>
      
    <div id="left">
     
    <div id="leftbox">
    <ol>
     <li><a href="http://www.yahoo.com/">ABC</a></li>
     <li><a href="http://www.yahoo.com/">123</a></li>
     <li><a href="http://www.yahoo.com/">XYZ</a></li>
    </ol>
    </div>
    
    <div id="rightbox">
    <p>right</p>
    </div>
    
    </div>
    
    </body>
    </html>
    

  3. #3
    ravindarjobs's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Nov 2007
    Location
    india
    Posts
    44

    Re: change image dynamically for div class

    hi coot head, are you from heaven?
    Many thanks man. You have placed me in right path where ever i am wrong in most of my posts.
    thank you

  4. #4
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: change image dynamically for div class

    Hi there ravindarjobs,
    ...are you from heaven?
    Well, that would depend upon your viewpoint.
    As heaven is dependent upon hell for it's existence, I have probably had a foot in both camps at some time or other.

    I did read this but cannot remember where or who penned it...
    "Those who receive your help are giving you a wonderful gift of the soul, but are rarely aware of their own generosity.
    Make sure you fully honour their gift when presenting your own."
    ...perhaps the answer is in there somewhere.

  5. #5
    site2shan's Avatar
    New User

    Status
    Offline
    Join Date
    Nov 2008
    Posts
    4

    Re: change image dynamically for div class

    Hi Coothead! I realize this thread is about a yr old. However, i have not been able to find anything similar. I have implemented this feature using your code which is awesome! Thanks sooo much. One issue i am running into however, it is not working in IE6. As much as i would just love to *not* support IE6, there are too many ppl still using it. Do you have any insight as to why this is not working? Here is a link so you can see it in action:

    http://applemum.com/virt_dress/virtual_dressing_room.html

    Thanks in advance for any help.

    Shanna

  6. #6
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: change image dynamically for div class

    Hi there site2shan,

    and a warm welcome to these forums.

    Your problem with IE6 is not caused by the javascript but rather by your use of the piper.png image.

    Unfortunately, IE6 does not support .png transparency.

    I would suggest that you use a gif image instead.

  7. #7
    site2shan's Avatar
    New User

    Status
    Offline
    Join Date
    Nov 2008
    Posts
    4

    Re: change image dynamically for div class

    whoops.. sorry, i forgot to upload my png fix. but regardless of that, it's still not working. i changed it to a gif and same result. the rollovers produce nothing and also the thumbs do not appear clickable.. (i am going to have each one go to the specific product page when clicked)

    thanks for the welcome!!

    shanna

  8. #8
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: change image dynamically for div class

    Hi there site2shan,

    when I try your link in IE6 it does not work.

    But when I use your source code with a base href...
    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>
    <base href="http://applemum.com/virt_dress/"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Virtual Dressing Room</title>
    <link rel="stylesheet" type="text/css" href="http://francie-pants.com/shop/templates/GeckoPro/stylesheet.css" />
    <!--[if lte IE 6]>
    <link type="text/css" rel="stylesheet" href="ie_layout.css" />
    <![endif]-->
    <style type="text/css">
    body {
         background-color:#EF9B23;
     }    
    #left {
       height:750px;
       width:950px;
        margin:0;
    	padding:20px;
    	background-image:url(images/virtbg1.png);
    	background-repeat:no-repeat;
    }
    .girl {
        display:inline;
        width:333px;
        height:600px;
        padding:120px 0 0 0;
        margin: 0;
       float:left;
    }
    #fabrics {
        width:600px;
        height:350px;
        padding:0;
        float:right;
        margin:0;
     }
     #fabrics img {
       border:0;
     }
    #fabrics ul {
       list-style:none;
       list-style-image:none; 
       display:inline;
     }
    #fabrics li {
        margin:2px 0;
    	height: auto; 
    	width: 15% !important; 
    	padding:2px;
    	margin-bottom: 2px; 
    	float:left;
     }
    
    #virtual_bg {
        width:333px;
        height:720px;
        padding:0;
        margin:0;
        float:left;
        background-image:url(images/bg.jpg);
    		background-repeat:no-repeat;
    		background-position:bottom;
    
     }
    </style>
    
    <script type="text/javascript">
    
       var obj;
       var preloads=[];
    
    function preload(){
    
    for(c=0;c<arguments.length;c++) {
       preloads[preloads.length]=new Image();
       preloads[preloads.length-1].src=arguments[c];
      }
     }
    preload('images/pat1.png','images/pat10.png','images/pat11.png','images/pat12.png','images/pat13.png','images/pat14.png','images/pat15.png','images/pat16.png','images/pat17.jpg','images/pat18.png','images/pat19.png','images/pat2.png','images/pat20.png','images/pat21.png','images/pat22.png','images/pat23.png','images/pat24.png','images/pat25.png','images/pat26.png','images/pat27.png','images/pat28.png','images/pat29.png','images/pat3.png','images/pat30.png','images/pat4.png','images/pat5.png','images/pat6.png','images/pat7.png','images/pat8.png','images/pat9.png');
    
    window.onload=function() {
       obj=document.getElementById('virtual_bg');
       lst=document.getElementById('fabrics').getElementsByTagName('li');
    for(c=0;c<lst.length;c++) {
       lst[c].id=c;
    lst[c].onmouseover=function() {
       swapColor(this,this.id);
       }
      }
     }
    function swapColor(el,num) {
       obj.style.backgroundImage='url('+preloads[num].src+')';
    el.onmouseout=function() {
       obj.style.backgroundImage='url(images/bg.jpg)';
      }
     }
    
    </script>
    
    </head>
    <body >
    <div style="background-image:url(http://francie-pants.com/shop/templates/GeckoPro/images/francie_bg.jpg); background-repeat:repeat-x; background-color:#FFFFFF; padding:0; margin:0;">
    
            <div style="width:1000px; margin:auto;" align="center" >
              
    <div align="center"><a href="index.php"><img src="http://francie-pants.com/shop/templates/GeckoPro/images/logo.png" border="0" alt="francie pants" width="1000" height="313" /></a></div>
    <div style="width:990px; margin:10px auto 0 auto; padding:0;" align="center">
    
    <a href="#" ><img src="http://francie-pants.com/shop/templates/GeckoPro/images/nav_off_01.png" alt="home" name="Home" width="83" height="30" border="0" id="Home" /></a><a href="#" ><img src="http://francie-pants.com/shop/templates/GeckoPro/images/nav_off_02.png" alt="about" name="About" width="85" height="30" border="0" id="About" /></a><a href="#"><img src="http://francie-pants.com/shop/templates/GeckoPro/images/nav_off_03.png" alt="shop" name="Shop" width="81" height="30" border="0" id="Shop" /></a><a href="#" ><img src="http://francie-pants.com/shop/templates/GeckoPro/images/nav_off_04.png" alt="Gallery" name="Gallery" width="102" height="30" border="0" id="Gallery" /></a><a href="#" ><img src="http://francie-pants.com/shop/templates/GeckoPro/images/nav_off_05.png" alt="Meet" name="Meet" width="237" height="30" border="0" id="Meet" /></a><a href="#"><img src="http://francie-pants.com/shop/templates/GeckoPro/images/nav_off_06.png" alt="Blog" name="Blog" width="76" height="30" border="0" id="Blog" /></a><a href="#" ><img src="http://francie-pants.com/shop/templates/GeckoPro/images/nav_off_07.png" alt="Press" name="Press" width="87" height="30" border="0" id="Press" /></a><a href="#" ><img src="http://francie-pants.com/shop/templates/GeckoPro/images/nav_off_08.png" alt="Wholesale" name="Wholesale" width="130" height="30" border="0" id="Wholesale" /></a><a href="#" ><img src="http://francie-pants.com/shop/templates/GeckoPro/images/nav_off_09.png" alt="Contact" name="Contact" width="109" height="30" border="0" id="Contact" /></a></div>
      
    <div id="left">
    <div align="center">
    <div id="virtual_bg">
    <div class="girl">
    <img src="images/piper.gif" width="333" height="600" alt="Red" />
    </div>
    </div>
    <div>
    <img src="images/welcome_virt.png" alt="welcome" height="250" width="500" />
    </div>
    <div id="fabrics">
    <ul>
     <li><a href="#"><img src="images/pat1_tn.png" alt="" height="77" width="77" /></a></li>
     <li><a href="#"><img src="images/pat10_tn.png" alt="" height="77" width="77" /></a></li>
     <li><a href="#"><img src="images/pat11_tn.png" alt="" height="77" width="77" /></a></li>
     <li><a href="#"><img src="images/pat12_tn.png" alt="" height="77" width="77" /></a></li>
     <li><a href="#"><img src="images/pat13_tn.png" alt="" height="77" width="77" /></a></li>
     <li><a href="#"><img src="images/pat14_tn.png" alt="" height="77" width="77" /></a></li>
     <li><a href="#"><img src="images/pat15_tn.png" alt="" height="77" width="77" /></a></li>
     <li><a href="#"><img src="images/pat16_tn.png" alt="" height="77" width="77" /></a></li>
     <li><a href="#"><img src="images/pat17_tn.png" alt="" height="77" width="77" /></a></li>
     <li><a href="#"><img src="images/pat18_tn.png" alt="" height="77" width="77" /></a></li>
     <li><a href="#"><img src="images/pat19_tn.png" alt="" height="77" width="77" /></a></li>
     <li><a href="#"><img src="images/pat2_tn.png" alt="" height="77" width="77" /></a></li>
     <li><a href="#"><img src="images/pat20_tn.png" alt="" height="77" width="77" /></a></li>
     <li><a href="#"><img src="images/pat21_tn.png" alt="" height="77" width="77" /></a></li>
     <li><a href="#"><img src="images/pat22_tn.png" alt="" height="77" width="77" /></a></li>
     <li><a href="#"><img src="images/pat23_tn.png" alt="" height="77" width="77" /></a></li>
     <li><a href="#"><img src="images/pat24_tn.png" alt="" height="77" width="77" /></a></li>
     <li><a href="#"><img src="images/pat25_tn.png" alt="" height="77" width="77" /></a></li>
     <li><a href="#"><img src="images/pat26_tn.png" alt="" height="77" width="77" /></a></li>
     <li><a href="#"><img src="images/pat27_tn.png" alt="" height="77" width="77" /></a></li>
     <li><a href="#"><img src="images/pat28_tn.png" alt="" height="77" width="77" /></a></li>
     <li><a href="#"><img src="images/pat29_tn.png" alt="" height="77" width="77" /></a></li>
     <li><a href="#"><img src="images/pat3_tn.png" alt="" height="77" width="77" /></a></li>
     <li><a href="#"><img src="images/pat30_tn.png" alt="" height="77" width="77" /></a></li>
     <li><a href="#"><img src="images/pat4_tn.png" alt="" height="77" width="77" /></a></li>
     <li><a href="#"><img src="images/pat5_tn.png" alt="" height="77" width="77" /></a></li>
     <li><a href="#"><img src="images/pat6_tn.png" alt="" height="77" width="77" /></a></li>
     <li><a href="#"><img src="images/pat7_tn.png" alt="" height="77" width="77" /></a></li>
     <li><a href="#"><img src="images/pat8_tn.png" alt="" height="77" width="77" /></a></li>
     <li><a href="#"><img src="images/pat9_tn.png" alt="" height="77" width="77" /></a></li>
    </ul>
    </div>
    </div>
    
    
    </div>
    </div>
    </div>
    
    <div style="height:180px; width:990px; margin:auto;" >
    <div style="float:right; text-align:right;" class="smallText">
    <p class="smallText">Copyright  2008 Francie Pants<br />
    All Rights Reserved<br />
    Design: <a href="http://sitesquared.com" class="smallText" target="_blank">Sitesquared.com</a></p>
    
    </div>
    </div>
    </body>
    </html>
    
    
    ...it does work, but I get an this error...
    Access is denied to: http://applemum.com/virt_dress/iepngfix.htc

    You need to look at your use of .png images not my javascript for a solution.
    As your iepngfix.htc is the cause of the IE6 problem, I would suggest that you use .gif images for that browser.

  9. #9
    site2shan's Avatar
    New User

    Status
    Offline
    Join Date
    Nov 2008
    Posts
    4

    Re: change image dynamically for div class

    thanks. unfortunately i can't use gifs, b/c they look horrible. But, thank you for pointing me in the right direction.. i will continue digging around on google. I cannot imagine i am the first one out there with this issue. Thanks again!!

  10. #10
    site2shan's Avatar
    New User

    Status
    Offline
    Join Date
    Nov 2008
    Posts
    4

    Re: change image dynamically for div class

    just a quick update.. in case anyone else runs into this issue... i implemented a png fix using css instead of an htc file and it worked like a charm. thanks again coothead.. none of this would have worked if I did not have the base href. ::slaps forehead::

  11. #11
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: change image dynamically for div class

    No problem, you're very welcome.

  12. #12
    arvindikchari's Avatar
    New User

    Status
    Offline
    Join Date
    Dec 2008
    Posts
    23

    Re: change image dynamically for div class

    Hello coothead,

    I have a question for you,.... is it possible to have a field where user can enter complete url to an image file, and on clicking 'Apply' button, that image is shown . And extending the same logic, can we have multiple sections where each section can be dynamically updated with a different image for each section again using a text field to specify url for each image.


    Regards
    Arvind

  13. #13
    rangana's Avatar
    Moderator/Allstar

    Status
    Offline
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    317

    Re: change image dynamically for div class

    Might help:
    HTML Code:
    <script type="text/javascript">
    /**
    applyMe function accepts 2 arguments
    	@param1 - The textbox's ID.
    	@param2 - The button. The image (at per time being) is the next element from the button
    */
    function applyMe(src,base)
    {
    // Set the src attribute of the next element from the button to that of the textbox's value
    base.nextSibling.nextSibling.setAttribute('src',document.getElementById(src).value);
    } // End of applyMe func
    </script>
    <style type="text/css">
    img{
    display:block;
    width:150px;
    height:100px;
    border:1px solid #666;
    padding:3px;
    margin:0px 0px 10px 0px;
    }
    </style>
    <label for="inp1">URL: </label>
    <input type="text" id="inp1" value="http://rangana.moonylist.com/images/Picture1.jpg">
    <input type="button" value="Apply" onclick="applyMe('inp1',this)">
    <img src="Default_Image.jpg" alt="Default">
    
    <label for="inp2">URL: </label>
    <input type="text" id="inp2" value="http://rangana.moonylist.com/images/Picture2.jpg">
    <input type="button" value="Apply" onclick="applyMe('inp2',this)">
    <img src="Default_Image.jpg" alt="Default">
    
    <label for="inp3">URL: </label>
    <input type="text" id="inp3" value="http://rangana.moonylist.com/images/Picture3.jpg">
    <input type="button" value="Apply" onclick="applyMe('inp3',this)">
    <img src="Default_Image.jpg" alt="Default">
    
    <label for="inp4">URL: </label>
    <input type="text" id="inp4" value="http://rangana.moonylist.com/images/Picture4.jpg">
    <input type="button" value="Apply" onclick="applyMe('inp4',this)">
    <img src="Default_Image.jpg" alt="Default">
    Checkout my porfolio.
    Please click the button when a member helped you.
    Take time to use Forum's Search function.

  14. #14
    arvindikchari's Avatar
    New User

    Status
    Offline
    Join Date
    Dec 2008
    Posts
    23

    Arrow Re: change image dynamically for div class

    Hello Rangana

    Thanks for the code... I have one question though.... if I have a 3 column standard layout, and want to change the background image only for each of the 3 sections' titles (only titles not body text), then how would that be coded And if I also want that the section body text background color be also specified in a text box(as a hexadecimal color) how would that be coded

    THanks again
    Arvind



Tags for this Thread