HTML - Slideshow With Text Changing Beneath It.
hi guys, im new at this forum
and i would like to know how to make this kind of slideshows like they have here. http://www.gamereactor.dk/?sid=3c0eb...f418e7e3c72777 how can the images and text beneath it change every 3 second?? i'm quite experienced with both html and CSS Similar TutorialsHell All, I have a question regarding to my website's home page: Right now my homepage has been embedded with an image and I want to insert the HTML text beneath the image. The text should not overlap with the background image and should have the same width as the webpage. How can I do that? Here is my home page: http://www.oleklejbzon.com/campbellsloft2/ And here are the index.html code: HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Campbellsloft - Space Age Rugs, ART</title> <style type="text/css"> /*.bottom { float: right; width: 250px; border-right-width: 20px; border-color: black; background-color: black; color: white; }*/ p {font-family: calibri;} /* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height */ #html, body {height:100%; margin:0; padding:0;} /* Set the position and dimensions of the background image. */ #page-background {color: black; position:fixed; top:0; left:0; width:100%; height:100%;} /* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */ #content {position:relative; z-index:1; padding:10px;} #background{color: black;} </style> <!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6 --> <!--[if IE 6]> <style type="text/css"> html {overflow-y:hidden;} body {overflow-y:auto;} #page-background {position:absolute; z-index:-1;} #content {position:static;padding:10px;} </style> <![endif]--> </head> <body> <div id="page-background"><img src="/campbellsloft2/i/image007_003.jpg" width="100%" height="100% ></div> <div id="content" align="bottom" bgcolor="black"> <h2></h2> <p>hello world</p> <p></p> </div> </body> </html> http://combatkicks.com/lobby/a_stree...ll-button.html Hello, The main concen is that when I increase the height of the pop-up box (pos-pop) sufficiently so that the vertical scroll bar is eliminated, the pop-up covers the bottom navigation ba at the bottomr, and the navigation links remain visible. Also, in centering the java scripted pop-up, is that best done with the CSS that controls the external page? The burn-through is not very attractive. <!-- External Page Loading Here --> <div class="ext_page" id="pos_os_sek_9000"> <p style="text-align:center;"> <a href="#" onclick="document.getElementById('pos_os_sek_9000').style.display = 'none';">CLOSE</a> </p> <iframe src="http://quiltron.net/pos-pop/combat-kicks/a_street/pos_os_sek_9000.html" width="850" height="450" > <p>Your browser does not support iframes. </p> </iframe> </div> 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? i have 3 images, 2 are feather's images and 1 is text image i am trying to put these two feather images(which are in png format so to be transparent) in opposite corners as well as in front and 3rd text image should come from behind of the start of feather n scroll to the end of the other feather image(it should come and go behind the feathers, not above) as feathers have little spaces so i want to show that text is going benath the feathers and ends where feather ends i have attached a sample image please help me in writing its code Do you know that happens when a visitor does click one of the Link and change the text next? Hi. Is it possible to have a box on the screen that displays different text when you roll over the different thumbnail. I'm in the middle of designing a site for a used car shop. I have a bunch of thumbnails on the screen and an empty box that I want to display the desciption of each thumbnail when you roll over it. Can this be done?? Leroy Hello, i was wondering if anyone could tell me how i could make a function on my website, where the user is able to change the text size themselves. Like the function at the bottom of www.wired.com where they allow the user to change the text size of the website to 3 different sizes. Thanks Nat. Hi, How can I define a "textarea" with number of rows and cols, but which the user can't delete or change the text inside the textarea ? Thanks Hello, I have a text area which is programmed to be dragged around the screen, and then the coordinates are saved. Would anyone happen to know if there is any way of changing the shape of a text area to be circular? Thanks! Hello, I hired contractors to build a site for me. The site's front page has a small section for text, the developers added some placeholder text in this spot. Now that the site is completed, I changed the text as follows: I downloaded the index.php file from my webhost. I changed it to a txt file, then opened in notepad, found the placeholder text, changed it, saved the file, renamed the file back to php, then uploaded to webhost, replacing old index.php file. When I load the page the following error message appears twice at the top of the window: Warning: session_start() [function.session-start]: Cannot send session cache limiter - headers already sent (output started at /home/XXXX/public_html/index.php:1) in /home/XXXX/public_html/index.php on line 2 Does anyone know what this error indicates ? (I'm not a programmer) I did not save the old index.php file because I didn't think such a minor change would cause problems. The contract with my developer has ended and I don't want to start a new one for this. Any help appreciated. Hi everyone, I hope I have posted this in the right area. This is my first time posting here. I currently have my main pages listed at the top of my site as graphics (see fussybaby.ca). I would like to potentially remove these graphics and use text links instead - I had the graphics designed for me, so I can't just go in and make new ones, however I'd like to change/rearrange the links and add some new ones. So my question is: How hard is this to do? Is this something I need to hire someone to do for me? Thanks in advance for any advice! Hi there, I am currently building a website in dreamweaver. It's going slow but so far I have overcome ever problem with the help of people like you! The problem I'm at at the moment is pretty tricky. If you visit. http://aquariusspa.co.uk/flw%5Fver2/flw_ver2.html This site I built with photoshop and then exported as html. Now i'm adding content and the nav bar (which isn't quite working right!). So what i'm looking to do is have the main box (one with welcome in it) change height depending on what i enter in to it. Every page has different amount of text. Now I could just build every page in photoshop for the desired page height but surely there must be a way of stretching what i've got with out wreaking the graphics. Thanks in advance. S 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? 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. 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 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. 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 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. |