No problem, you're welcome. ;)
Printable View
No problem, you're welcome. ;)
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
thanks,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>
regards,
Hi there shsh_shah,
your error was to give the img id to its containing div. :eek:
Here is your amended code...
cootheadCode:
<!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>
Hi... this Really Helped Me for simple container... But I was wondering how may i use this in a filter-container...
this is the default code for filter-container i used.... how may i change this and use it? I really apreciate your help... thx!!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>
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>
Can anyone help me??? No One?
