|
HTML - Scrolling Slideshow?
Hi, i'm trying to design a webpage and I was wondering if there was a way to create a row of pictures that ONLY scroll like a slideshow when the cursor is hovering over the buttons. Is it possible? How?
Thanks Similar TutorialsUsing the meta http-equiv="refresh"... code I'm having my website slide through each page of my website. Is there any way I can have the user STOP the refresh onclick? So that if t hey want to stay on that page they can instead of being redirected to the next? Thanks below there is a piece of code with slideshow (I took it from http://www.ricocheting.com/code/java...mage-slideshow). I can see only the first picture, not the rest. Can someone help me? <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title>try5</title> </head> <body> <script type="text/javascript"> // Author: ricocheting.com // Description: slideshow that allows visitors to flip through a series of images on your website var x=0; function rotate(num){ fs=document.ff.slide; x=num%fs.length; if(x<0) x=fs.length-1; document.images.show.src=fs.options[x].value; fs.selectedIndex=x;} function auto() { if(document.ff.fa.value == "Stop"){ rotate(++x);setTimeout("auto()", 5000);}} </script> <form name="ff"> <table style="border: 1px solid black; border-collapse: collapse;" cellpadding="3"> <tbody> <tr> <th align="center"></th> </tr> <tr> <td align="center"><img src="IMG0.JPG" name="show"> </td> </tr> <tr> <td style="border: 1px solid black;" align="center"> <select name="slide" onchange="rotate(this.selectedIndex);"> <option value="IMG0.JPG"></option> <option value="IMG1.JPG"></option> </select> </td> </tr> <tr> <td style="border: 1px solid black;" align="center"><input onclick="rotate(0);" value="ll<<" title="Jump to beginning" type="button"> <input onclick="rotate(x-1);" value="<<" title="Last Picture" type="button"><input name="fa" onclick="this.value=((this.value=='Stop')?'Start':'Stop');auto();" value="Stop" title="Autoplay" style="width: 75px;" type="button"> <input onclick="rotate(x+1);" value=">>" title="Next Picture" type="button"><input onclick="rotate(this.form.slide.length-1);" value=">>ll" title="Jump to end" type="button"> </td> </tr> </tbody> </table> </form> </body> </html> I'm making a website for a club in my school. I'm trying to put a slideshow script that has javascript and css into the page, and I've gotten it to fit and everything, but the slideshow isn't functioning. Independently, the slideshow works. Here are the links. It would be great if someone could help me with this. Problematic Site: http://www.freewebs.com/valleykey/new.htm Site without slideshow: http://www.freewebs.com/valleykey/ Slideshow: http://www.freewebs.com/valleykey/1.htm Hi everyone, I'm looking for a html/css script that will allow me to do something similar to the image slideshow on http://trilogyproducts.com/. The Trilogy Products slideshow is in flash, however we were hoping to replicate it in HTML - in particular the fade in and out automated slideshow, PLUS the ability to click on to the little circle navigation and fade out the current shot and fade in the selected shot. Any help would be very much appreciated. Thanks Bec How do I make a slideshow where images roll and when clicked on go to another page? <div style="width:600px; text-align: center;"><embed type="application/x-shockwave-flash" wmode="transparent" src="http://w22.photobucket.com/pbwidget.swf?pbwurl=http://w22.photobucket.com/albums/b339/ashezfal/product-misc/91c6ecdd.pbw" height="180" width="600"><a href="http://photobucket.com/slideshows" target="_blank"><img src="http://pic.photobucket.com/slideshows/btn.gif" style="float:left;border-width: 0;" ></a><a href="http://s22.photobucket.com/albums/b339/ashezfal/product-misc/?action=view¤t=91c6ecdd.pbw" target="_blank"><img src="http://pic.photobucket.com/slideshows/btn_viewallimages.gif" style="float:left;border-width: 0;" ></a></div> This is the html code for a photobucket slideshow that i am trying to use on my website. my problem is that when you click on it, it takes you to my album. I know i can change that on photobucket preferences but i just want to make it so that it can't be clicked at all. Can anybody help me? I want to create a slideshow, with the pictures rotating at the bottom of my webpage. However, when the page changes it jumps back to the top of the page. Does anyone know how to prevent this? Thanks. There are about 200 photos in a folder d:\photos\. How to make a script to display slideshow of all photos one by one without entering each photo's name? I found a script which displays all photos but need to input all photos' name. I want to position my slideshow in the center of the side. the buttons are positioned with css. http://javascript.lima-city.de/ Who can help ? Right, I have started up a gaming website and I need that Headline Slideshow feature implemented soon as. Here is what I'm struggling with: I want to swap the normal action buttons (supplied by the slide generator *liink at bottom) with images I have created. Buttons I want changed too (<)Left button =http://i40.tinypic.com/mrftlc.jpg (>)Right button =http://i39.tinypic.com/5wuo5.jpg I do not want any other action buttons. But I want my images to be placed around the slide like so http://i40.tinypic.com/2176tf.jpg Here is the Code: Code: <!-- configurable script -->
<script type="text/javascript">
theimage = new Array();
// The dimensions of ALL the images should be the same or some of them may look stretched or reduced in Netscape 4.
// Format: theimage[...]=[image URL, link URL, name/description]
theimage[0]=["http://i42.tinypic.com/205tidx.jpg", "http://enj.yolasite.com", ""];
theimage[1]=["http://i42.tinypic.com/205tidx.jpg", "http://enj.yolasite.com", ""];
///// Plugin variables
playspeed=5000;// The playspeed determines the delay for the "Play" button in ms
//#####
//key that holds where in the array currently are
i=0;
//###########################################
window.onload=function(){
//preload images into browser
preloadSlide();
//set the first slide
SetSlide(0);
//autoplay
PlaySlide();
}
//###########################################
function SetSlide(num) {
//too big
i=num%theimage.length;
//too small
if(i<0)i=theimage.length-1;
//switch the image
document.images.imgslide.src=theimage[i][0];
//if they want name of current slide
document.getElementById('slidebox').innerHTML=theimage[i][2];
}
//###########################################
function PlaySlide() {
if (!window.playing) {
PlayingSlide(i+1);
if(document.slideshow.play){
document.slideshow.play.value=" Stop ";
}
}
else {
playing=clearTimeout(playing);
if(document.slideshow.play){
document.slideshow.play.value=" Play ";
}
}
// if you have to change the image for the "playing" slide
if(document.images.imgPlay){
setTimeout('document.images.imgPlay.src="'+imgStop+'"',1);
imgStop=document.images.imgPlay.src
}
}
//###########################################
function PlayingSlide(num) {
playing=setTimeout('PlayingSlide(i+1);SetSlide(i+1);', playspeed);
}
//###########################################
function preloadSlide() {
for(k=0;k<theimage.length;k++) {
theimage[k][0]=new Image().src=theimage[k][0];
}
}
</script>
<!-- slide show HTML -->
<form name="slideshow">
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="center">
<a href="#" onmouseover="this.href=theimage[i][1];return false">
<script type="text/javascript">
document.write('<img name="imgslide" id="imgslide" src="'+theimage[0][0]+'" border="0">')
</script>
</a>
</td>
</tr>
<tr>
<td align="center"><div id="slidebox"></div></td>
</tr>
<tr>
<td align="center">
<input type="button" value="I<<" onclick="SetSlide(0);" title="Jump to starting image">
<input type="button" value="<<" onclick="SetSlide(i-1);" title="Previous image">
<input type="button" name="play" value=" Play " onclick="PlaySlide();" title="Autoplay">
<input type="button" value=">>" onclick="SetSlide(i+1);" title="Jump to next image">
<input type="button" value=">>I" onclick="SetSlide(theimage.length-1);" title="Jump to ending image">
</td>
</tr>
</table>
</form>
<!-- end of slide show HTML -->
(code generated from http://www.ricocheting.com/code/java...e-slideshow-v2 if that helps) PLEASE NOTE: We do not want the (>>) (<<) or <PLAY> buttons. Just as above. We would gratefully accept any help - we are really bad with HTML. We have contacted the developer of the code but as of posting there has been no response. Thx. Im really not sure if the title of this thread is right. Anyway, i dont know too much about HTML coding, but id like help with something on my .... MySpace haha Alright, so this is my myspace at the moment. www.myspace.com/cj_x3 As you can see, i have links on the sides, done by the following code example; Quote: <div style="width: 78px; height: 22px; position: absolute; bottom:5px;right:15px; background-color: transparent; border-width:0px;border-style:solid;border-color: transparent; font-family: verdana;"> <a href="LINK" style="color: dd4444; font-size: 9px; position: absolute; right: 0px; top: 0px">EXAMPLE LINK TEXT</a> </div> When you scroll down, the links on the sides scroll off the top. I dont like this... What i want to happen, is for them to be fixed, like the background, so when you scroll down, the links around the sides dont move. Thanks for the help in advance Hey all. I have been working on this website that my friend had been designing, and was just wondering if this was possible. The way it is now, the topmost div's are supposed to stay in their position at all times, and the only part that would scroll would be the main body. The two body divs (left and right) have been placed inside the div that should be scrolling. I know there is the css overflow, but the problem is, there is no fixed height on the div, so this method isn't quite right. If anyone knows of a way where we could just start the scrolling at a certain point down the page, that would be great. Here is a link to the page so far - don't worry, it won't look close to that when finished... Image/text placeholders are horrid, I know. http://http://pixelconcepts.zxq.net/ -Thanks in advance. So, I would like to make a one-line textfield that will automatically scroll when too much text is added. So, for example, if I have a field that has room for 20 characters, and someone enters 10 characters, it looks as expected. However, if someone enters 30 characters, only characters 10-30 would be visible. Is this possible? my page (http://www.zerofivezero.net/the_project102.html) is scrolling as if there's content down the page, but there isn't...I can't figure it out. I'm using the code below to hide the content and have it swapped when selecting an item from the nav. Code: .hidden {
position:absolute;
z-index:2;
visibility:hidden;
Code: <div id="section3_region" class="hidden"><div class="news"><fieldset>
<legend><img src="images/forum_leg.jpg" width="120" height="28" border="0" alt=""/></legend>
<br /><br />
<div class="img"><img src="images/news_thumb1.jpg" width="80" height="75" border="1" alt=""/></div>
This is the news section<br />
Yep, this is where the news will be. This will be the short blurb about the story.
<div class="img"><img src="images/news_thumb2.jpg" width="80" height="75" border="1" alt=""/></div>
This is the news section<br />
Yep, this is where the news will be. This will be the short blurb about the story.
<div class="img"><img src="images/news_thumb3.jpg" width="80" height="75" border="1" alt=""/></div>
This is the news section<br />
Yep, this is where the news will be. This will be the short blurb about the story.
</fieldset></div>
i can open the popup but when i try to open the image i cant see it because he comes to back i want a little help here plz. I am doing a job for school i am a amauter on html http://www.datafilehost.com/download-fc6cb3ce.html I am having problem aligning text next to a javascript slideshow in a table. I can't get text to sit next to the show. It always goes on the top or bottom. Please, any help? Hey, I'm helping design a site www.tbdgaming.com and we have an ad box up top that shows different pictures and captions for each one, and what we'd like to do is have those pictures (theres 5) switch every x seconds to the next one, and we'd like it to be clean. The code is: Code: <!-- starting headlines -->
<div class="headlineWrap" id="headlineWrap">
<!-- headline 1 -->
<div id="headline1">
<a href=""><img src="http://i39.tinypic.com/2zycr3n.gif" alt="" /></a>
<div class="headlineContent">
<div class="headlineTxt">To Be Determined - Coming Soon</div>
<div class="headlineSwitch">
<a href="javascript:setImg(0)" onclick="switchHeadline('headline1');"><img src="images/icons/1on.gif" alt="" /></a>
<a href="javascript:setImg(1)" onclick="switchHeadline('headline2');"><img src="images/icons/2.gif" alt="" /></a>
<a href="javascript:setImg(2)" onclick="switchHeadline('headline3');"><img src="images/icons/3.gif" alt="" /></a>
<a href="javascript:setImg(3)" onclick="switchHeadline('headline4');"><img src="images/icons/4.gif" alt="" /></a>
<a href="javascript:setImg(4)" onclick="switchHeadline('headline5');"><img src="images/icons/5.gif" alt="" /></a>
</div>
</div>
</div>
<!-- headline 2 -->
<div id="headline2" style="display: none;" >
<a href=""><img src="http://i42.tinypic.com/aazxqh.gif" alt="" /></a>
<div class="headlineContent">
<div class="headlineTxt">To Be Determined - Coming Soon</div>
<div class="headlineSwitch">
<a href="javascript:setImg(0)" onclick="switchHeadline('headline1');"><img src="images/icons/1.gif" alt="" /></a>
<a href="javascript:setImg(1)" onclick="switchHeadline('headline2');"><img src="images/icons/2on.gif" alt="" /></a>
<a href="javascript:setImg(2)" onclick="switchHeadline('headline3');"><img src="images/icons/3.gif" alt="" /></a>
<a href="javascript:setImg(3)" onclick="switchHeadline('headline4');"><img src="images/icons/4.gif" alt="" /></a>
<a href="javascript:setImg(4)" onclick="switchHeadline('headline5');"><img src="images/icons/5.gif" alt="" /></a>
</div>
</div>
</div>
<!-- headline 3 -->
<div id="headline3" style="display: none;" >
<a href=""><img src="images/content/headlinepic.gif" alt="" /></a>
<div class="headlineContent">
<div class="headlineTxt">To Be Determined - Coming Soon</div>
<div class="headlineSwitch">
<a href="#javascript:setImg(0)" onclick="switchHeadline('headline1');"><img src="images/icons/1.gif" alt="" /></a>
<a href="javascript:setImg(1)" onclick="switchHeadline('headline2');"><img src="images/icons/2.gif" alt="" /></a>
<a href="javascript:setImg(2)" onclick="switchHeadline('headline3');"><img src="images/icons/3on.gif" alt="" /></a>
<a href="javascript:setImg(3)" onclick="switchHeadline('headline4');"><img src="images/icons/4.gif" alt="" /></a>
<a href="javascript:setImg(4)" onclick="switchHeadline('headline5');"><img src="images/icons/5.gif" alt="" /></a>
</div>
</div>
</div>
<!-- headline 4 -->
<div id="headline4" style="display: none;" >
<a href=""><img src="images/content/headlinepic.gif" alt="" /></a>
<div class="headlineContent">
<div class="headlineTxt">To Be Determined - Coming Soon</div>
<div class="headlineSwitch">
<a href="javascript:setImg(0)" onclick="switchHeadline('headline1');"><img src="images/icons/1.gif" alt="" /></a>
<a href="javascript:setImg(1)" onclick="switchHeadline('headline2');"><img src="images/icons/2.gif" alt="" /></a>
<a href="javascript:setImg(2)" onclick="switchHeadline('headline3');"><img src="images/icons/3.gif" alt="" /></a>
<a href="javascript:setImg(3)" onclick="switchHeadline('headline4');"><img src="images/icons/4on.gif" alt="" /></a>
<a href="javascript:setImg(4)" onclick="switchHeadline('headline5');"><img src="images/icons/5.gif" alt="" /></a>
</div>
</div>
</div>
<!-- headline 5 -->
<div id="headline5" style="display: none;" >
<a href=""><img src="images/content/headlinepic.gif" alt="" /></a>
<div class="headlineContent">
<div class="headlineTxt">To Be Determined - Coming Soon</div>
<div class="headlineSwitch">
<a href="javascript:setImg(0)" onclick="switchHeadline('headline1');"><img src="images/icons/1.gif" alt="" /></a>
<a href="javascript:setImg(1)" onclick="switchHeadline('headline2');"><img src="images/icons/2.gif" alt="" /></a>
<a href="javascript:setImg(2)" onclick="switchHeadline('headline3');"><img src="images/icons/3.gif" alt="" /></a>
<a href="javascript:setImg(3)" onclick="switchHeadline('headline4');"><img src="images/icons/4.gif" alt="" /></a>
<a href="javascript:setImg(4)" onclick="switchHeadline('headline5');"><img src="images/icons/5on.gif" alt="" /></a>
</div>
</div>
</div>
</div>
<!-- ending headlines -->
And again the site is www.tbdgaming.com, so if anyone could send me the HTML or non-executable java (no .jars to be added to directories) so that the pictures would rotate between eachother I'd really appreciate it. Also if there it a way to shorten the code I would appreciate it, as you can see its very long because its divided up so that each headline is separately coded to work when selected, but is there some way I can combine it into one compact space so that it functions the same but is shorter? Hello, i am trying to implement a basic slideshow on my website. My code is as follows: <img id="img1" height="500" src="" width="500" /> <a href="javascript:moveToNextSlide()">Next</a> <script type="text/javascript">> var index=31; function moveToNextSlide() { var slideName="slideshowimages/IMG_00" + index++ + ".jpg"; var img1 = document.getElementById("img1"); img1.src = slidename; } moveToNextSlide(); </script> each image is called IMG_00 followed by a number from 31-41 .jpg. when i view the page the image doesn't appear, there is just a small red cross in a white box and the next function doesn't work.Please can someone help me! Cheers, Peter Hi I have multiple images on my home page working in a slideshow as you can see at www.1bit.org.uk/yourhome But, what I want is the same as what I have on this site: http://www.villavacationsvip.com/viprestaurants.html The difference is on that second slideshow, it uses flash. I don't want to use flash so is this possible to do? Hi all, I cant seem to manage to put links to the slideshow I'm using. http://fifthmammoth.co.uk/slideshow/example4.html This doesn't appear to work: Code: <div id="slide_01">
<div id="myShow-1" class="slide-show">
<div class="slide first">
<a href="pro_scherm/index.html"><img alt="" src="slideshow2/images/slide_01.jpg" width="300" height="200">
<div class="slide-caption">plaatje 1</div></a>
</div>
<div class="slide">
<img src="slideshow2/images/slide_02.jpg" width="300" height="200">
<div class="slide-caption">plaatje 2</div>
</div>
<div class="slide">
<img src="slideshow2/images/slide_03.jpg" width="300" height="200">
<div class="slide-caption">plaatje 3</div>
</div>
</div>
Another thing I'd like to accomplish, to make a link between the slideshow in the mainscreen, and the menubar below. Ideally, if you rollover the slideshow, the matching project in the menubar below lightens. Is it possible to create a rollover effect like this? Your help would be really appreciated! |
|||||||