Menu
All,
I’d like to have something similar to the rotating images and text on my website. The website that I would like to mimick is: [url]http://www.photoworks.com/
You can see that the images move but there is still text over the image that I can click on. How would I go about doing something similar to this on my website. I’m guessing it’s a combination of Javascript and CSS but I figured I’d start here. Thanks for any help in advance.
[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" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.frame {
position:relative;width:940px;height:400px;
}
.links {
position:absolute;z-Index:2;left:140px;top:160px;border:solid red 1px;
}
/*]]>*/
</style></head>
<body>
<div id="tst" >
<div class="frame" >
<img src="http://ak.imgag.com/imgag/pw/merchandising/billboards/guest_homepage_2_16_2.jpg" />
<div class="links" >LINKS 1</div>
</div>
<div class="frame" >
<img src="http://ak.imgag.com/imgag/pw/merchandising/billboards/guest_homepage_2_16_1.jpg" />
<div class="links" >LINKS 2</div>
</div>
</div>
<script type="text/javascript">
/*<![CDATA[*/
function SS(o){
var obj=document.getElementById(o.ID),clds=obj.childNodes,z0=0;
this.ary=[];
for (;z0<clds.length;z0++){
if (clds[z0].nodeType==1){
clds[z0].style.position='absolute';
clds[z0].style.left='0px';
clds[z0].style.top='0px';
clds[z0].style.display=this.ary.length==0?'block':'none';
this.ary.push(clds[z0]);
}
}
this.hold=o.Hold;
this.lst=this.ary[0];
this.cnt=-1;
this.to=null;
this.auto();
}
SS.prototype={
auto:function(){
var oop=this;
this.lst.style.display='none';
this.cnt=++this.cnt%this.ary.length;
this.lst=this.ary[this.cnt];
this.lst.style.display='block';
this.to=setTimeout(function(){ oop.auto(); },this.hold);
}
}
new SS({
ID:'tst',
Hold:2000
});
/*]]>*/
</script>
</body>
</html>[/CODE][CODE]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
<html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
.frame {
display: none;
}
</style>
<script type="text/javascript">
var curFrame = 0;
function swapFrame(){
for(i=0; i < oFrames.length; i++){
oFrames[i].style.display = 'none';
}
oFrames[curFrame].style.display = 'block';
curFrame = (++curFrame > oFrames.length-1)? 0 : curFrame;
setTimeout(swapFrame,2000);
}
window.onload=function(){
oContainer = document.getElementById('container');
oFrames = new Array();
oContainerChilds = oContainer.childNodes;
for(i=0; i < oContainerChilds.length; i++){
if(oContainerChilds[i].className == 'frame'){
oFrames.push(oContainerChilds[i]);
}
}
swapFrame();
}
</script>
</head>
<body>
<div id="container" >
<div class="frame">
<img src="[URL]http://ak.imgag.com/imgag/pw/merchandising/billboards/guest_homepage_2_16_2.jpg[/URL]" />
</div>
<div class="frame">
<img src="[URL]http://ak.imgag.com/imgag/pw/merchandising/billboards/guest_homepage_2_16_1.jpg[/URL]" />
</div>
<div class="links" >LINKS 1</div>
<div class="links" >LINKS 2</div>
</div>
</body>
</html>
[/CODE]and then if the roll over one of the image links it will show link 1 or link depending on which one they rolled over? .[/quote]
So basically put the Link 1 and Link 2 over the image in vwphillips post but side by side.[/quote]
So the images would swap like you provided but if I rolled over the link text then it would automatically swap to the image associated with the Text I rolled over and then once I moved off of the link text it would go back to the normal swapping.[/quote]
[CODE]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
<html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
#container {
position: relative;
}
.frame {
display: none;
}
#links {
position: absolute;
top: 170px;
left: 50px;
}
</style>
<script type="text/javascript">
var curFrame = 0;
function swapFrame(){
for(i=0; i < oFrames.length; i++){
oFrames[i].style.display = 'none';
}
oFrames[curFrame].style.display = 'block';
curFrame = (++curFrame > oFrames.length-1)? 0 : curFrame;
setTimeout(swapFrame,2000);
}
window.onload=function(){
oContainer = document.getElementById('container');
oFrames = new Array();
oContainerChilds = oContainer.childNodes;
for(i=0; i < oContainerChilds.length; i++){
if(oContainerChilds[i].className == 'frame'){
oFrames.push(oContainerChilds[i]);
}
}
swapFrame();
}
</script>
</head>
<body>
<div id="container" >
<div class="frame">
<img src="[URL]http://ak.imgag.com/imgag/pw/merchandising/billboards/guest_homepage_2_16_2.jpg[/URL]" />
</div>
<div class="frame">
<img src="[URL]http://ak.imgag.com/imgag/pw/merchandising/billboards/guest_homepage_2_16_1.jpg[/URL]" />
</div>
<div id="links" >
<a href="link1">Link 1</a>
<a href="link2">Link 2</a>
</div>
</div>
</body>
</html>
[/CODE][CODE]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
<html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
#container {
position: relative;
}
.frame {
display: none;
}
#links {
position: absolute;
top: 170px;
left: 50px;
}
</style>
<script type="text/javascript">
var curFrame = 0, timer;
function swapFrame(){
hideAllFrames();
oFrames[curFrame].style.display = 'block';
curFrame = (++curFrame > oFrames.length-1)? 0 : curFrame;
timer = setTimeout(swapFrame,2000);
}
function hideAllFrames(){
for(i=0; i < oFrames.length; i++){
oFrames[i].style.display = 'none';
}
}
window.onload=function(){
oContainer = document.getElementById('container');
oFrames = new Array();
oContainerChilds = oContainer.childNodes;
for(i=0; i < oContainerChilds.length; i++){
if(oContainerChilds[i].className == 'frame'){
oFrames.push(oContainerChilds[i]);
}
}
oLinks = document.getElementById('links').getElementsByTagName('a');
for(i=0; i < oLinks.length; i++){
oLinks[i].num = i;
oLinks[i].onmouseover=function(){
clearTimeout(timer);
hideAllFrames();
curFrame = this.num
oFrames[curFrame].style.display = 'block';
}
oLinks[i].onmouseout=function() {
curFrame = (++curFrame > oFrames.length-1)? 0 : curFrame;
swapFrame();
}
}
swapFrame();
}
</script>
</head>
<body>
<div id="container" >
<div class="frame">
<img src="[URL]http://ak.imgag.com/imgag/pw/merchandising/billboards/guest_homepage_2_16_2.jpg[/URL]" />
</div>
<div class="frame">
<img src="[URL]http://ak.imgag.com/imgag/pw/merchandising/billboards/guest_homepage_2_16_1.jpg[/URL]" />
</div>
<div id="links" >
<a href="">Link 1</a>
<a href="">Link 2</a>
</div>
</div>
</body>
</html>
[/CODE]0.1.9 — BETA 5.18