www.webdeveloper.com
Page 2 of 2 FirstFirst 12
Results 16 to 21 of 21

Thread: Change image multiple times

  1. #16
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,460
    No problem, you're welcome.

  2. #17
    Join Date
    Apr 2008
    Posts
    11

    Just a last help on the code

    Hi,

    Ok finally i get it working but the prob is when i do as following as in proper all code as below script doesnt work...please help

    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>
    		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
    		<meta name="generator" content="Adobe GoLive" />
    		<title>Zeberga</title>
    		<link href="css/basic.css" rel="stylesheet" type="text/css" media="all" />
    		
    		<script type="text/javascript">
    
    	   var pics2=['dress1.jpg','dress2.jpg','dress3.jpg'];
    	   var pics1=['fur.jpg','fur1.jpg','fur2.jpg'];
    
    	   var pics3=['top.jpg','top1.jpg','top2.jpg'];
    
    
    
    	   var count=0;
    	   var speed=1000; /*this is set for 1 second, edit to suit requirements*/
    	   var timer;
    
    	window.onload=function(){
    
    	document.getElementById('furs').onmouseover=function() {
    	   rotateImage(this,pics1);
    	  }
    
    	document.getElementById('dress').onmouseover=function() {
    	   rotateImage(this,pics2);
    	  }
    
    	 document.getElementById('tops').onmouseover=function() {
    	   rotateImage(this,pics3);
    	  }
    
    	  }
    
    
    	function rotateImage(obj,ary) {
    
    	obj.onmouseout=function() {
    	   count=0;
    	   clearTimeout(timer);
    	   obj.src=ary[0];
    	   return;
    	 }
    	   count++;
    	if(count==ary.length) {
    	   count=0;
    	 }
    	   obj.src=ary[count];
    	   obj1=obj;
    	   ary1=ary
    	   timer=setTimeout('rotateImage(obj1,ary1)',speed);
    	 }
    </script>
    
    	</head>
    
    	<body>
    	<div id="header"><img src="images/title.gif" alt="" width="800" height="150" border="0" /></div>
    		
    	<div id="menubar"> <!-- menubar start -->
    	
    			<div id="button1"><a href="index.html">Home</a></div>
    			<div id="button3"><a href="about.html">About</a></div>
    			<div id="button2">Collection</div>
    			<div id="button4"><a href="contacts.html">Contacts</a></div>
    	
    	</div> <!-- menubar close -->
    
    	<div id="content"> <!--  content start -->
    	
    			<div id="left3"> <!-- left3 start -->
    			<div id="dress">
    			<img src="images/dress2.jpg" alt="" width="207" height="264" border="0" /></div>
    			<div id="tops"><img src="images/top.jpg" alt="" width="207" height="264" border="0" /></div>
    		</div> <!-- left3 close --> 
    			
    			<div id="right3"> <!-- right3 start -->
    
    			<div id="furs"><img src="images/fur1.jpg" alt="" width="207" height="264" border="0" /></div>
    		</div> <!-- right3 close -->
    			
    	</div>  <!--content close -->
    			 
    	</body>
    
    </html>
    thanks,
    regards,

  3. #18
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,460
    Hi there shsh_shah,

    your error was to give the img id to its containing div.

    Here is your amended code...
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Zeberga</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <link href="css/basic.css" rel="stylesheet" type="text/css" media="all" >
    
    <style type="text/css">/*add these rules to your stylesheet*/
    #header img {
        width:800px;
        height:150px;
        border:0;
     }
    #left3 img,#right3 img {
        width:207px;
        height:264px;
        border:1px solid red;;
     }
    </style>
    		
    <script type="text/javascript">
    
    var pics2=['images/dress2.jpg','images/dress1.jpg','images/dress3.jpg'];
    var pics1=['images/fur1.jpg','images/fur.jpg','images/fur2.jpg'];
    var pics3=['images/top.jpg','images/top1.jpg','images/top2.jpg'];
    
    var count=0;
    var speed=1000; /*this is set for 1 second, edit to suit requirements*/
    var timer;
    
    window.onload=function(){
    
    document.getElementById('furs').onmouseover=function() {
       rotateImage(this,pics1);
     }
    document.getElementById('dress').onmouseover=function() {
       rotateImage(this,pics2);
     }
    document.getElementById('tops').onmouseover=function() {
       rotateImage(this,pics3);
      }
     }
    function rotateImage(obj,ary) {
    obj.onmouseout=function() {
       count=0;
       clearTimeout(timer);
       obj.src=ary[0];
       return;
     }
       count++;
    if(count==ary.length) {
       count=0;
     }
       obj.src=ary[count];
       obj1=obj;
       ary1=ary
       timer=setTimeout('rotateImage(obj1,ary1)',speed);
     }
    </script>
    
    </head>
    <body>
    
    <div id="header">
    <img src="images/title.gif" alt="">
    </div>
    
    <div id="menubar"> <!-- menubar start -->
    <div id="button1"><a href="index.html">Home</a></div>
    <div id="button3"><a href="about.html">About</a></div>
    <div id="button2">Collection</div>
    <div id="button4"><a href="contacts.html">Contacts</a></div>
    </div> <!-- menubar close -->
    
    <div id="content"> <!--  content start -->
    
    <div id="left3"> <!-- left3 start -->
    
    <div>
    <img id="dress" src="images/dress2.jpg" alt="">
    </div>
    
    <div>
    <img id="tops" src="images/top.jpg" alt="">
    </div>
    </div> <!-- left3 close --> 
    			
    <div id="right3"> <!-- right3 start -->
    <img id="furs" src="images/fur1.jpg" alt="">
    </div> <!-- right3 close -->
    			
    </div>  <!--content close -->
    			 
    </body>
    </html>
    
    coothead

  4. #19
    Join Date
    Jan 2013
    Posts
    3

    Question

    Hi... this Really Helped Me for simple container... But I was wondering how may i use this in a filter-container...
    Code:
    <div id="filter-container" class="cf">
    					<figure class="web">
    						<img src="01.jpg"  alt="alt" />
    						<figcaption>
    							<a href="project.html"><h3 class="heading">Title </h3></a>
    							Something about the pic</figcaption>
    					</figure>
                                                                           </div>
    this is the default code for filter-container i used.... how may i change this and use it? I really apreciate your help... thx!!

  5. #20
    Join Date
    Jan 2013
    Posts
    3
    sry... i missed typed something... code is like this...
    Code:
    <div id="filter-container" class="cf">
    					<figure class="web">
    						<a href="project.html" class="thumb"><img src="01.jpg"  alt="alt" />
    						<figcaption>
    							<a href="project.html"><h3 class="heading">Title </h3></a>
    							Something about the pic</figcaption>
    					</figure>
                                                                           </div>

  6. #21
    Join Date
    Jan 2013
    Posts
    3

    Question

    Can anyone help me??? No One?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles