|
JavaScript - Mouseover Slideshow - Javascript:warp ()
Hi,
After many hours spent trying to resolve this myself, I've finally accepted I'm not going to stumble across an answer. Would very much appreciate any guidance! Basically, I have a mouseover slideshow setup purely thanks to the Javascript Kit. It consists of three smaller images that feed into a larger one. I have also added code to change the accompanying text on rollover. The only problem I have, is that before the user hovers over one of the smaller images, the larger image doesn't link anywhere. Given that the 'a href' for the div is "javascript:warp()" is it still possible to have the larger image link to a url before any of the smaller images have been activated? Or will I need to recode completely to achieve this? If I haven't explained well enough, you can see the problem here - http://soundsenseonline.co.uk/ Many Thanks, JD Code:
<script>
/*Rollover effect on different image script-
By JavaScript Kit (http://javascriptkit.com)
Over 200+ free scripts here!
*/
function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink
}
</script>
<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
preloadimages("http://soundsenseonline.co.uk/featuredcontentimages/1.png","http://soundsenseonline.co.uk/featuredcontentimages/2.png","http://soundsenseonline.co.uk/featuredcontentimages/3.png")
</script>
</head>
<body>
<div class="featuredcontentall">
<div class="featuredcontent">
<a href="javascript:warp()"><img src="http://soundsenseonline.co.uk/featuredcontentimages/1.png" width="740" height="327" name="targetimage" border=0>
<div id="featuredcontenttext">Stateside Selection: The Material</div>
</div></a>
<div class="featuredcontentslides">
<a href="http://soundsenseonline.co.uk/2011/07/stateside-selection-the-material/" onMouseover="changeimage(myimages[0],this.href)
document.getElementById('featuredcontenttext').firstChild.data = 'Stateside Selection: The Material'; return true;"><img src="http://soundsenseonline.co.uk/featuredcontentimages/1s.png" width="238" /></a>
<a href="http://soundsenseonline.co.uk/2011/07/sarah-jarosz-live-the-greystones-sheffield-17072011/" onMouseover="changeimage(myimages[1],this.href)
document.getElementById('featuredcontenttext').firstChild.data = 'Live Review: Sarah Jarosz @ The Greystones, Sheffield 17/07/2011'; return true;"><img src="http://soundsenseonline.co.uk/featuredcontentimages/2s.png" width="238"/></a>
<a href="http://soundsenseonline.co.uk/2011/05/mc-lars-weerd-science/" onMouseover="changeimage(myimages[2],this.href)
document.getElementById('featuredcontenttext').firstChild.data = 'Exclusive: MC Lars & Weerd Science - Live Performance and Interview'; return true;"><img src="http://soundsenseonline.co.uk/featuredcontentimages/3s.png" width="238"/></a>
</div></div>
</body>
Similar TutorialsIs there a line of code I can add to my slideshow code to have the slideshow activated by mouseOver and show the main picture on mouseOut, or do I have to redo the code? I've been searching online for a while and can't find anything that works. Any help would be appreciated! Code: <script language="JavaScript1.1">
<!--
/*
JavaScript Image slideshow:
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free JavaScript here!
*/
var slideimages=new Array()
function slideshowimages(){
for (i=0;i<slideshowimages.arguments.length;i++){
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
}
}
//-->
</script>
<img src="https://lh3.googleusercontent.com/-_ZBn3vpI1aM/TeT4Ty9Dh8I/AAAAAAAABQ8/OWXNUQfXn5U/butterfly.png" name="slide" border=0 width=50 height=47>
<script>
<!--
//configure the paths of the images, plus corresponding target links
slideshowimages("https://lh6.googleusercontent.com/-bPZjekuMNX8/TeT4TyZ2z7I/AAAAAAAABRA/swrVvRqHTpM/butterfly1.png","https://lh6.googleusercontent.com/-fM-kMmy3STQ/TeT4T_aq5hI/AAAAAAAABRE/oq4rGMy8-Qs/butterfly2.png","https://lh3.googleusercontent.com/-jR41bich1pw/TeT4UFyGefI/AAAAAAAABRI/2V8B6bx8P0o/butterfly5.png", "https://lh3.googleusercontent.com/-_ZBn3vpI1aM/TeT4Ty9Dh8I/AAAAAAAABQ8/OWXNUQfXn5U/butterfly.png")
//configure the speed of the slideshow, in miliseconds
var slideshowspeed=200
var whichlink=0
var whichimage=0
function slideit(){
if (!document.images)
return
document.images.slide.src=slideimages[whichimage].src
whichlink=whichimage
if (whichimage<slideimages.length-1)
whichimage++
setTimeout("slideit()",slideshowspeed)
}
slideit()
//-->
</script>
<p align="center"><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript
Kit</a></font></p>
Hi, I have a series of images, anchored linked together to simulate a tour. I decided it would be better if rather than clicking it was like a smooth simulation so i added onmousever to the anchor links. this was a smooth transistion but entirely too fast. is there a way with javascript, to slow down the onmouseover events? i have the images on the same page, just shoved down the page by using pagebreak html, so that they load when the page loads and therefore don't slow down the effect. (they are large images). i can't use the script that smoothly scrolls between anchor links, because it scrolls down the page to the next image, which ruins the effect. the images are increasingly larger pictures of the same thing, so the effect is somewhat like moving thru 3d space. i need the onmouseover to FIRE but move slower than normal onmouseover before firing again. repeat. here's an example http://www.thelivingmoon.com/undomie...rmouse.html#22 i mean the entire sequence is done before the person even realizes what just happened I have a few java events attached to a couple rollover buttons. They seem to all work just great on every browser but ie8 for some reason. Code: <script type="text/javascript"src="lookbook_web/mouseovers.js">
<div id="thumb_container">
<div id="thumb1"><a href="javascript:void()"onmouseover="ShowPage('fra me1')"onclick="ShowPage('frame1')" rel="nofollow" rel="nofollow" target="mainbox"></a></div>
<div id="thumb2"><a href="javascript:void()"onmouseover="ShowPage('fra me2')"onclick="ShowPage('frame2')" rel="nofollow" rel="nofollow" target="mainbox"></a></div>
<div id="thumb3"><a href="javascript:void()"onmouseover="ShowPage('fra me3')"onclick="ShowPage('frame3')" rel="nofollow" rel="nofollow" target="mainbox"></a></div>
And then the mouseovers.js file looks like this (this is just a script i found online and edited so my guess is that the issue is here): Code: function ShowPage(frame1)
//Display in the i-frame, the page whose name is aName
{
{
frames[0].location = frame1+'.html'
}
function ShowPage(frame2)
//Display in the i-frame, the page whose name is aName
{
frames[0].location = frame2+'.html'
}
function ShowPage(frame3)
//Display in the i-frame, the page whose name is aName
{
frames[0].location = frame3+'.html'
}
}
Like i said, works on ffox, safari, ie7, chrome.. so im sort of at a loss. Ideas? Hi, I can't figure out what's wrong with my code here, but my mouseovers aren't working. Here's the page: http://www.basentana.com/pastproductions2.html I appreciate any help at all. Ok, I'm working in dreamweaver cs4 I'm trying to make my links have a sound on mouseover. The tag for this is under the depreciated behaviour section. I tried it to test it. It added the following code to my link: Code: To View Full Product Line<br />
<a href="http://herbal-nutrition.net/yesifeelgood/products" target="_blank" onmouseover="MM_controlSound('play','document.test','sounds/Sound 378.mp3')">Click Here</a>
<embed name="test" src="sounds/Sound 378.mp3" loop="false" autostart="false" hidden="true" width="0" height="0" enablejavascript="true"></embed>
My only problem is that when this loads in a browser on mouseover it loads the window as a quicktime sound then directs to the link preview on the following link (the link where I added the sound is underneath the slideshow: http://www.designfoxmediaworks.com/c...e/carlene.html is there something i should be changing to make this work properly? I am a Javascript novice so please bear with me here. I made a multi level menu at http://x7.ro/proiect/produse.html -first left menu item:Raticide- by using Javascript and css. What this should do is show the sub-menu on mouseover and hide it on mouseout WITH a custom delay so people have a chance to click menu items. This seems to work except for the all needed delay. I was trying to use javascript setTimeout function but I cannot seem to make it work. Think this should be easy for a pro and Id remain indebted if any of you could help. Thanks a lot. Below is the working code:JS and Html. Code: <SCRIPT type=text/javascript>
function showElement(layer){
var myLayer = document.getElementById(layer);
if(myLayer.style.display=="none"){
myLayer.style.display="block";
myLayer.backgroundPosition="top";
} else {
myLayer.style.display="none";
}
}
function hideElement(layer){
var myLayer = document.getElementById(layer);
if(myLayer.style.display=="block"){
myLayer.style.display="none";
myLayer.backgroundPosition="top";
} else {
myLayer.style.display="block";
}
}
</SCRIPT>
Code: <A class=button onMouseOver="javascript:showElement('v-menu');return false;" onMouseOut="javascript:hideElement('v-menu');return false;" href="#"><SPAN>Raticide</SPAN></A>
<UL style="DISPLAY: none" id=v-menu class=v-menu>
<LI><A href="aaa.html">PRODIORAT</A></LI>
<LI><A href="aaa.html"> PROBRODIRAT</A></LI></UL>
Hi, I don't really know much about Javascript but I was wondering if anyone could tell me how to change this script so when you click on a link it doesn't open in a new window? Any help would be much appreciated! Code: <script language="JavaScript1.1">
<!--
var slideimages=new Array()
var slidelinks=new Array()
function slideshowimages(){
for (i=0;i<slideshowimages.arguments.length;i++){
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
}
}
function slideshowlinks(){
for (i=0;i<slideshowlinks.arguments.length;i++)
slidelinks[i]=slideshowlinks.arguments[i]
}
function gotoshow(){
if (!window.winslide||winslide.closed)
winslide=window.open(slidelinks[whichlink])
else
winslide.location=slidelinks[whichlink]
winslide.focus()
}
//-->
</script><br>
<a href="javascript:gotoshow()"><img src="/images/brochure/2010/homepage_freestyle/Feb/Banner-Paris-special-129.jpg" name="slide" border=0 width=429 height=90></a>
<script>
<!--
//configure the paths of the images, plus corresponding target links
slideshowimages("/images/brochure/2010/homepage_freestyle/Feb/Banner-Paris-special-129.jpg","/images/brochure/2010/homepage_freestyle/Feb/Banner-3-for-1.jpg","/images/brochure/2010/homepage_freestyle/Feb/Banner-London-89.jpg","/images/brochure/2010/homepage_freestyle/Feb/Banner-Brussels-special-155.jpg")
slideshowlinks("/dl/holidayoffers.jsp?destination=DISCOVER_PARIS_BREAKS,RE,TO","/dl/holidayoffers.jsp?destination=MAILER_EUROSTAR_3_FOR_1,RE,TO,","/dl/holidayoffers.jsp?destination=london_rail_breaks,RE,TO,","/dl/holidayoffers.jsp?destination=DISCOVER_BRUSSELS,RE,TO,")
//configure the speed of the slideshow, in miliseconds
var slideshowspeed=3000
var whichlink=0
var whichimage=0
function slideit(){
if (!document.images)
return
document.images.slide.src=slideimages[whichimage].src
whichlink=whichimage
if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",slideshowspeed)
}
slideit()
//-->
</script>
<p>
I have created two pages. One with a selection of images one with a working slideshow. How do I get it that a user can select 4 images that are then transferred to the slideshow and played in that slideshow? I appolgise if this is a simple fix but I am very new to JavaScript. Thank you all in advance Hi, Pretty simple problem I hope Ive somehow changed something in my coding on my html page to stop the slide show working correctly. Any ideas heres the link: http://sparekeys.org.uk/ Please help i know its something stupid but I just cant see it. Hey guys; I work as a webmaster for my school and I am trying to develop a JavaScript slideshow for pictures. I am a beginner to JavaScript, so if my coding is off, please let me know. What I am trying to do is have multiple automatic slideshows for this website. I want each of the slideshow boxes to run through the images, however the coding is wrong, causing the first box to switch through the images for the second box and the second one not switching at all. Sorry if thats confusing, please ask if you need any other specifications. Here is my JavaScript coding: //Slideshow //September 18 NewImg = new Array ("Pictures/Sept18/290.jpg", "Pictures/Sept18/293.jpg", "Pictures/Sept18/304.jpg", "Pictures/Sept18/310b.jpg", "Pictures/Sept18/311.jpg", "Pictures/Sept18/317.jpg", "Pictures/Sept18/323.jpg", "Pictures/Sept18/327.jpg", "Pictures/Sept18/328.jpg", "Pictures/Sept18/331.jpg", "Pictures/Sept18/333.jpg", "Pictures/Sept18/337.jpg", "Pictures/Sept18/339.jpg", "Pictures/Sept18/340.jpg", "Pictures/Sept18/342.jpg", "Pictures/Sept18/344.jpg", "Pictures/Sept18/346.jpg", "Pictures/Sept18/351.jpg", "Pictures/Sept18/352.jpg", "Pictures/Sept18/353.jpg", "Pictures/Sept18/354.jpg", "Pictures/Sept18/356.jpg", "Pictures/Sept18/359.jpg", "Pictures/Sept18/360b.jpg", "Pictures/Sept18/361.jpg", "Pictures/Sept18/362.jpg", "Pictures/Sept18/363b.jpg", "Pictures/Sept18/366.jpg", "Pictures/Sept18/370.jpg", "Pictures/Sept18/374b.jpg", "Pictures/Sept18/379.jpg", "Pictures/Sept18/385.jpg", "Pictures/Sept18/391.jpg", "Pictures/Sept18/392.jpg", "Pictures/Sept18/393.jpg", "Pictures/Sept18/394.jpg", "Pictures/Sept18/398.jpg", "Pictures/Sept18/408.jpg", "Pictures/Sept18/410.jpg", "Pictures/Sept18/415.jpg", "Pictures/Sept18/419.jpg", "Pictures/Sept18/427.jpg", "Pictures/Sept18/428b.jpg", "Pictures/Sept18/429.jpg", "Pictures/Sept18/432.jpg", "Pictures/Sept18/435.jpg", "Pictures/Sept18/440.jpg", "Pictures/Sept18/441.jpg", "Pictures/Sept18/443.jpg", "Pictures/Sept18/448.jpg", "Pictures/Sept18/449.jpg", "Pictures/Sept18/450.jpg", "Pictures/Sept18/455.jpg", "Pictures/Sept18/456.jpg", "Pictures/Sept18/460.jpg", "Pictures/Sept18/461.jpg", "Pictures/Sept18/463.jpg", "Pictures/Sept18/467.jpg", "Pictures/Sept18/470.jpg", "Pictures/Sept18/474b.jpg", "Pictures/Sept18/478b.jpg", "Pictures/Sept18/481.jpg", "Pictures/Sept18/484.jpg", "Pictures/Sept18/486.jpg", "Pictures/Sept18/491b.jpg", "Pictures/Sept18/496.jpg", "Pictures/Sept18/498b.jpg", "Pictures/Sept18/503.jpg", "Pictures/Sept18/505b.jpg", "Pictures/Sept18/506b.jpg", "Pictures/Sept18/508.jpg", "Pictures/Sept18/509.jpg", "Pictures/Sept18/514.jpg", "Pictures/Sept18/525b.jpg", "Pictures/Sept18/527.jpg", "Pictures/Sept18/531b.jpg", "Pictures/Sept18/532b.jpg", "Pictures/Sept18/533b.jpg", "Pictures/Sept18/538b.jpg", "Pictures/Sept18/542.jpg", "Pictures/Sept18/544b.jpg", "Pictures/Sept18/547.jpg", "Pictures/Sept18/549.jpg", "Pictures/Sept18/557b.jpg", "Pictures/Sept18/560.jpg", "Pictures/Sept18/565.jpg", "Pictures/Sept18/567.jpg", "Pictures/Sept18/571b.jpg", "Pictures/Sept18/574b.jpg", "Pictures/Sept18/583b.jpg", "Pictures/Sept18/587.jpg", "Pictures/Sept18/588.jpg", "Pictures/Sept18/597b.jpg", "Pictures/Sept18/610b.jpg"); var ImgNum = 0; var ImgLength = NewImg.length - 1; var delay = 2500; var lock = false; var run; function chgImg(direction) { if (document.images) { ImgNum = ImgNum + direction; if (ImgNum > ImgLength) { ImgNum = 0; } if (ImgNum < 0) { ImgNum = ImgLength; } document.sept18.src = NewImg[ImgNum]; } } function auto() { if (lock == false) { lock = true; run = setInterval("chgImg(1)", delay); } } //September 25 NewImg = new Array ("Pictures/Sept25/626b.jpg", "Pictures/Sept25/633.jpg", "Pictures/Sept25/634.jpg", "Pictures/Sept25/636.jpg", "Pictures/Sept25/639.jpg"); var ImgNum = 0; var ImgLength = NewImg.length - 1; var delay = 2500; var lock = false; var run; function chgImg(direction) { if (document.images) { ImgNum = ImgNum + direction; if (ImgNum > ImgLength) { ImgNum = 0; } if (ImgNum < 0) { ImgNum = ImgLength; } document.sept18.src = NewImg[ImgNum]; } } function auto() { if (lock == false) { lock = true; run = setInterval("chgImg(1)", delay); } } And here is where in the HTML the coding is referred to: <?php include 'top.php' ?> <img src="Images/Bar_Images/home.png" class="header" /> <p>Welcome to the TCNJ Women's Club Rugby homepage!</p><br /> <p class="sub">Pictures</p> <div class="box"> <a href="http://www.tcnj.edu/~rugby/sept18.php"><img name="sept18" src="Pictures/Sept18/290.jpg" class="slides" align="left" /></a> <p align="right">September 18th, 2010</p> </div> <div class="box"> <a href="http://www.tcnj.edu/~rugby/sept25.php"><img name="Sept25" src="Pictures/Sept25/626b.jpg" class="slides" align="left" /></a> <p align="right">September 25th, 2010</p> </div> <?php include 'bottom.php' ?> As you can see, I am using PHP to refer to other pages, but the JavaScript coding is referred to in the <head> and the <body> tag is onloading the auto() function. Please help me fix this code, or if it is impossible to do it this way, let me know. Thank you. Greetings fellow coders, I am having an issue with my rollover images. The first image (when hovered over) is fine, however when I hover over the second image the mouseover effect replaces the first jpg. Any idea how I can seperate the behaviours so my 2nd image mouseover glow is in it's correct place? Thanks in advance, Zeme Andrews 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>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script language="javascript" type="text/javascript">
if (document.images) {
var button1 = new Image();
var button2 = new Image();
var button3 = new Image();
var button4 = new Image();
var button5 = new Image();
var button6 = new Image();
button1.src= "images/thumb1.jpg" ;
button2.src= "images/thumb1_glow.jpg";
button3.src= "images/thumb2.jpg";
button4.src= "images/thumb2_glow.jpg";
button5.src= "images/thumb3.jpg";
button6.src= "images/thumb3_glow.jpg";
}
</script>
<script type="text/javascript" src="/nav/tb/jquery.js"></script>
<script type="text/javascript" src="/nav/tb/thickbox.js"></script>
</head>
<body>
<table width="530" border="5" cellspacing="0" cellpadding="0" align="left">
<tr><td align="justify">
<img src="images/thumb1.jpg" height="230" width="150" alt="" border="2" hspace="5" name="rollover" onmouseover="document.rollover.src=button2.src"
onmouseout="document.rollover.src=button1.src" />
<img src="images/thumb2.jpg" height="230" alt="" width="150" border="2" hspace="5" name="rollover_1" onmouseover="document.rollover.src=button4.src"
onmouseout="document.rollover.src=button3.src" />
<img src="images/thumb3.jpg" height="230" alt="" width="150" border="2" hspace="5" name="rollover_2" onmouseover="document.rollover.src=button6.src" onmouseout="document.rollover.src=button5.src" />
</td></tr>
</table>
</body>
</html>
I'm using Adobe GoLive 5... Mouseover buttons on the navigation bar don't function properly on the web, but they do in GoLive. I believe it's a Javascript coding issue, but I can't figure out exactly what (I'm no programmer). The site I'm working on is www.txbrandland.com - can anyone show me what's wrong or missing in the following code? I appreciate any help I can get. Code: <html> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> <meta name="generator" content="Adobe GoLive 5"> <title>Welcome to Texas Brand Land Co.</title> <csscriptdict import> <script src="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/GeneratedItems/CSScriptLib.js"></script> </csscriptdict> <csactiondict> <script><!-- CSInit[CSInit.length] = new Array(CSILoad,/*CMP*/'Main Page',/*URL*/'file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/home-out.jpg',/*URL*/'file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/home-in.jpg',/*URL*/'file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/home-in.jpg',''); CSInit[CSInit.length] = new Array(CSILoad,/*CMP*/'Acreage With House',/*URL*/'file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/awh-out.jpg',/*URL*/'file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/awh-in.jpg',/*URL*/'file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/awh-in.jpg',''); CSInit[CSInit.length] = new Array(CSILoad,/*CMP*/'Acreage Only',/*URL*/'file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/a-out.jpg',/*URL*/'file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/a-in.jpg',/*URL*/'file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/a-in.jpg',''); CSInit[CSInit.length] = new Array(CSILoad,/*CMP*/'Homes Only',/*URL*/'file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/h-out.jpg',/*URL*/'file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/h-in.jpg',/*URL*/'file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/h-in.jpg',''); CSInit[CSInit.length] = new Array(CSILoad,/*CMP*/'Commercial Property',/*URL*/'file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/comm-out.jpg',/*URL*/'file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/comm-in.jpg',/*URL*/'file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/comm-in.jpg',''); CSInit[CSInit.length] = new Array(CSILoad,/*CMP*/'About Us',/*URL*/'file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/about-out.jpg',/*URL*/'file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/about-in.jpg',/*URL*/'file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/about-in.jpg',''); CSInit[CSInit.length] = new Array(CSILoad,/*CMP*/'Meet Our Team',/*URL*/'file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/agents-out.jpg',/*URL*/'file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/agents-in.jpg',/*URL*/'file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/agents-in.jpg',''); CSInit[CSInit.length] = new Array(CSILoad,/*CMP*/'Community Information',/*URL*/'file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/links-out.jpg',/*URL*/'file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/links-in.jpg',/*URL*/'file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/links-in.jpg',''); CSInit[CSInit.length] = new Array(CSILoad,/*CMP*/'Contact Information',/*URL*/'file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/contact-out.jpg',/*URL*/'file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/contact-in.jpg',/*URL*/'file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/contact-in.jpg',''); // --></script> </csactiondict> </head> <body onload="CSScriptInit();"> <div align="left"> <br> <table border="0" cellpadding="0" cellspacing="10" align="left" width="164" height="355"> <tr> <td> <div align="center"> <csobj w="175" h="35" t="Button" ht="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/home-in.jpg" cl="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/home-in.jpg"><a href="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/index.html" onmouseover="return CSIShow(/*CMP*/'Main Page',1)" onmouseout="return CSIShow(/*CMP*/'Main Page',0)" onclick="CSIShow(/*CMP*/'Main Page',2);return CSButtonReturn()"><img src="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/home-out.jpg" width="175" height="35" name="Main Page" border="0"></a></csobj></div> </td> </tr> <tr> <td> <div align="center"> <csobj w="175" h="35" t="Button" ht="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/awh-in.jpg" cl="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/awh-in.jpg"><a href="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/Acreage%20With%20House.html" onmouseover="return CSIShow(/*CMP*/'Acreage With House',1)" onmouseout="return CSIShow(/*CMP*/'Acreage With House',0)" onclick="CSIShow(/*CMP*/'Acreage With House',2);return CSButtonReturn()"><img src="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/awh-out.jpg" width="175" height="35" name="Acreage With House" border="0"></a></csobj></div> </td> </tr> <tr> <td> <div align="center"> <csobj w="175" h="35" t="Button" ht="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/a-in.jpg" cl="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/a-in.jpg"><a href="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/Acreage.html" onmouseover="return CSIShow(/*CMP*/'Acreage Only',1)" onmouseout="return CSIShow(/*CMP*/'Acreage Only',0)" onclick="CSIShow(/*CMP*/'Acreage Only',2);return CSButtonReturn()"><img src="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/a-out.jpg" width="175" height="35" name="Acreage Only" border="0"></a></csobj></div> </td> </tr> <tr> <td> <div align="center"> <csobj w="175" h="35" t="Button" ht="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/h-in.jpg" cl="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/h-in.jpg"><a href="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/Homes.html" onmouseover="return CSIShow(/*CMP*/'Homes Only',1)" onmouseout="return CSIShow(/*CMP*/'Homes Only',0)" onclick="CSIShow(/*CMP*/'Homes Only',2);return CSButtonReturn()"><img src="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/h-out.jpg" width="175" height="35" name="Homes Only" border="0"></a></csobj></div> </td> </tr> <tr> <td> <div align="center"> <csobj w="175" h="35" t="Button" ht="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/comm-in.jpg" cl="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/comm-in.jpg"><a href="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/Commercial.html" onmouseover="return CSIShow(/*CMP*/'Commercial Property',1)" onmouseout="return CSIShow(/*CMP*/'Commercial Property',0)" onclick="CSIShow(/*CMP*/'Commercial Property',2);return CSButtonReturn()"><img src="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/comm-out.jpg" width="175" height="35" name="Commercial Property" border="0"></a></csobj></div> </td> </tr> <tr> <td> <div align="center"> <csobj w="175" h="35" t="Button" ht="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/about-in.jpg" cl="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/about-in.jpg"><a href="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/About%20Us.html" onmouseover="return CSIShow(/*CMP*/'About Us',1)" onmouseout="return CSIShow(/*CMP*/'About Us',0)" onclick="CSIShow(/*CMP*/'About Us',2);return CSButtonReturn()"><img src="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/about-out.jpg" width="175" height="35" name="About Us" border="0"></a></csobj></div> </td> </tr> <tr> <td> <div align="center"> <csobj w="175" h="35" t="Button" ht="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/agents-in.jpg" cl="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/agents-in.jpg"><a href="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/Meet%20Our%20Team.html" onmouseover="return CSIShow(/*CMP*/'Meet Our Team',1)" onmouseout="return CSIShow(/*CMP*/'Meet Our Team',0)" onclick="CSIShow(/*CMP*/'Meet Our Team',2);return CSButtonReturn()"><img src="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/agents-out.jpg" width="175" height="35" name="Meet Our Team" border="0"></a></csobj></div> </td> </tr> <tr> <td> <div align="center"> <csobj w="175" h="35" t="Button" ht="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/links-in.jpg" cl="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/links-in.jpg"><a href="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/Community.html" onmouseover="return CSIShow(/*CMP*/'Community Information',1)" onmouseout="return CSIShow(/*CMP*/'Community Information',0)" onclick="CSIShow(/*CMP*/'Community Information',2);return CSButtonReturn()"><img src="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/links-out.jpg" width="175" height="35" name="Community Information" border="0"></a></csobj></div> </td> </tr> <tr> <td><csobj w="175" h="35" t="Button" ht="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/contact-in.jpg" cl="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/contact-in.jpg"><a href="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/Contact%20Us.html" onmouseover="return CSIShow(/*CMP*/'Contact Information',1)" onmouseout="return CSIShow(/*CMP*/'Contact Information',0)" onclick="CSIShow(/*CMP*/'Contact Information',2);return CSButtonReturn()"><img src="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/contact-out.jpg" width="175" height="35" name="Contact Information" border="0"></a></csobj></td> </tr> </table> </div> </body> </html> Hi I am trying to implement a hide/show div, such that when you mouse over a div, another div pop's up below it. Here's what I have so far, but for some reason, only the first div set is working. That is when I mouse over div 1, div 2 shows up. So why isnt it working for divs 3,4 and 5,6? Here's my code: Code:
HTML
<div >
<div id="showhide">
Line 1
</div>
<div id="visiblediv" style="display: none;">
Line 2
</div>
</div>
<div >
<div id="showhide">
Line 3
</div>
<div id="visiblediv" style="display: none;">
Line 4
</div>
</div>
<div >
<div id="showhide">
Line 5
</div>
<div id="visiblediv" style="display: none;">
Line 6
</div>
</div>
Javascript:
<script>
function mover(){
document.getElementById("visiblediv").style.display="block"
}
function mout() {
document.getElementById("visiblediv").style.display="none"
}
document.getElementById('showhide').onmouseover=mover;
document.getElementById('showhide').onmouseout=mout;
</script>
CSS:
#visiblediv {
visibility:visible;
border:1px dotted black;
}
Any ideas, as to why it's not working? hello, It is a insult to newbie to cal myself one, but I have a blog that I am trying to get a simple bit of code to work on. I have text rotator that I found and have made it work for my purposes, but I need it to pause when someone mouses over and restart when then mouse off. I have found code snipets online but I am not smart enough to figure out where they fit in....Help would be very appreciated the code it below.... Code: <div id="quotetext" >
text
</div>
<script type="text/javascript" >
var myquotes = new Array(
'quote 1',
'quote 2',
'qoute 3'
);
function rotatequote()
{
thequote = myquotes.shift(); //Pull the top one
myquotes.push(thequote); //And add it back to the end
document.getElementById('quotetext').innerHTML = thequote;
// This rotates the quote every 10 seconds.
// Replace 10000 with (the number of seconds you want) * 1000
t=setTimeout("rotatequote()",5000);
}
// Start the first rotation.
rotatequote();
</script>
Hello guys and gals , I am using one of the JavaScript codes provided at http://www.javascriptkit.com, and it works great on Chrome and Firefox. But Internet Explorer is giving me trouble Here is the HTML: Code: <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="Keywords go here" name="keywords" />
<meta content="Description goes here" name="description" />
<meta content="This website is coded and maintained by ***** " name="author" />
<meta content="@2004 ***** " name="copyright" />
<meta http-equiv="Content-Style-Type" content="text/css2" />
<title>Concepto MV</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Comfortaa:400,700' rel='stylesheet' type='text/css'>
<!--Website coded and maintained by Alexandra barvo
Copyright @2011 w ww.alexandrabarvo.com -->
</head>
<body>
<div id="background"></div><!--Backgroung-->
<div id="wrapper">
<div id="nav">
<div id="logo">
<img src="images/logo.png"/>
</div><!--logo-->
<ul id="main_nav">
<li><a class="active" href="index.html">HOME</a></li>
<li>|</a></li>
<li><a href="about.html">OUR COMPANY</a></li>
<li>|</a></li>
<li><a href="services.html">SERVICES</a></li>
<li>|</a></li>
<li><a href="contact.html">CONTACT US</a></li>
</ul>
<ul id="social">
<li><a href="http://www.twitter.com" target="blank"><img src="images/twitter.png" border="0"/></a></li>
<li><a href="http://www.flickr.com" target="blank"><img src="images/flickr.png" border="0"/></a></li>
<li><a href="http://www.facebook.com" target="blank"><img src="images/facebook.png" border="0"/></a></li>
</ul>
</div><!--nav-->
<div id="slideshow">
<script type="text/javascript">
// Flexible Image Slideshow- By JavaScriptKit.com (http://www.javascriptkit.com)
// For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
// This notice must stay intact for use
var ultimateshow=new Array()
//ultimateshow[x]=["path to image", "OPTIONAL link for image", "OPTIONAL link target"]
ultimateshow[0]=['images/render1.jpg', '', '']
ultimateshow[1]=['images/render2.jpg', '', '']
ultimateshow[2]=['images/render3.jpg', '', '']
//configure the below 3 variables to set the dimension/background color of the slideshow
var slidewidth="900px" //set to width of LARGEST image in your slideshow
var slideheight="400px" //set to height of LARGEST iamge in your slideshow
var slidecycles="3" //number of cycles before slideshow stops (ie: "2" or "continous")
var randomorder="no" //randomize the order in which images are displayed? "yes" or "no"
var preloadimages="yes" //preload images? "yes" or "no"
var slidebgcolor='white'
//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=3000
////Do not edit pass this line////////////////
var ie=document.all
var dom=document.getElementById
var curcycle=0
if (preloadimages=="yes"){
for (i=0;i<ultimateshow.length;i++){
var cacheimage=new Image()
cacheimage.src=ultimateshow[i][0]
}
}
var currentslide=0
function randomize(targetarray){
ultimateshowCopy=new Array()
var the_one
var z=0
while (z<targetarray.length){
the_one=Math.floor(Math.random()*targetarray.length)
if (targetarray[the_one]!="_selected!"){
ultimateshowCopy[z]=targetarray[the_one]
targetarray[the_one]="_selected!"
z++
}
}
}
if (randomorder=="yes")
randomize(ultimateshow)
else
ultimateshowCopy=ultimateshow
function rotateimages(){
curcycle=(currentslide==0)? curcycle+1 : curcycle
ultcontainer='<center>'
if (ultimateshowCopy[currentslide][1]!="")
ultcontainer+='<a href="'+ultimateshowCopy[currentslide][1]+'" target="'+ultimateshowCopy[currentslide][2]+'">'
ultcontainer+='<img src="'+ultimateshowCopy[currentslide][0]+'" border="0">'
if (ultimateshowCopy[currentslide][1]!="")
ultcontainer+='</a>'
ultcontainer+='</center>'
if (ie||dom)
crossrotateobj.innerHTML=ultcontainer
if (currentslide==ultimateshow.length-1) currentslide=0
else currentslide++
if (curcycle==parseInt(slidecycles) && currentslide==0)
return
setTimeout("rotateimages()",slidedelay)
}
if (ie||dom)
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')
function start_slider(){
crossrotateobj=dom? document.getElementById("slidedom") : document.all.slidedom
rotateimages()
}
if (ie||dom)
window.onload=start_slider
</script>
</div><!--slideshow-->
<div class="push"></div><!--push-->
</div><!--wrapper-->
<div class="footer">
<p id="copy">Copyright © 2012</p>
</div><!--footer-->
</div><!--body-->
</body>
</html>
And here is the CSS Code: @charset "utf-8";
/* CSS Document */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
}
body{
background:url(../images/bg.jpg) repeat;
padding: 0px;
font: 12px 'Comfortaa', Helvetica, sans-serif;
color: #CCC;
}
#wrapper{
margin:0 auto 75px auto;
width:960px;
min-height: 100%;
height:auto !important;
height:100%;
}
#background{
background:url(../images/nav_bg.png) repeat-x;
position:absolute;
left:0;
top:35px;
width:100%;
height:100%;
z-index:-1;
}
#website{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
z-index:99;
}
#nav{
/*background: url(../images/nav_bg.png) repeat-x;*/
width: 100%;
height: 75px;
margin-top: 35px;
margin-bottom: 75px;
}
#logo{
margin-left:40px;
float:left;
}
#main_nav{
margin-left: 22px;
}
ul#main_nav{
list-style:none;
float:left;
margin-top: 38px;
}
ul#main_nav li{
display:inline;
padding-left:7px;
font-size:14px;
}
ul#main_nav a{
text-decoration:none;
color:#ccc;
}
ul#main_nav a:hover{
text-decoration:none;
color:#666;
}
ul#social{
list-style:none;
float:left;
margin-top: 34px;
margin-left: 22px;
}
ul#social li{
display:inline;
padding-left:10px;
font-size:18px;
}
ul#social a{
text-decoration:none;
color:#ccc;
}
ul#social a:hover{
text-decoration:none;
color:#666;
}
#slideshow{
width:900px;
height:400px;
border:#101010 solid 5px;
padding: 0px;
margin: 0px auto;
}
.footer{
text-align:center;
background-color: #000;
padding: 37px 0px 0px 0px;
margin:0px;
width:100%;
background:url(../images/nav_bg.png) repeat-x;
}
.footer, .push{
height: 75px;
}
Can anyone tell me of I am doing something wrong, or if I just need to use another code for the slideshow to work on ie? Thank you so much for you time. Ale http://www.javascriptkit.com/script/...2/3slide.shtml Hi i have the above image slideshow script running fine on a webpage can anybody tell me how i can get it to run a second time to show a second different slideshow on the same page? Ive tried editing variables but i cant work it out. would be much appreciated Ta New to the forum so any help you can provide is greatly appreciated. I have been using a Javascript slideshow code for several websites. I create images that are exactly the same size and then the slideshow moves through them with a cross-fade. Cross-fade does not work in FireFox but images still change over nicely, just no fade. In IE, the cross-fade worked beautifully, creating a seamless transition between images. Now - I'm guessing within the last 2 months? - these images in IE 'jump'. Instead of a seamless transition, the fade causes the next image in show to come in from upper left of slide show area. So images appear to jump into place rather than slowly transition in. Did IE change something in the way it processes Java? This code worked perfectly until recently. I'm not a Java programmer - using this code from another source. Here is heart of the transition code: [CODE] var tss; var iss; var jss = 1; var pss = Picture.length-1; var preLoad = new Array(); for (iss = 1; iss < pss+1; iss++){ preLoad[iss] = new Image(); preLoad[iss].src = Picture[iss];} function runSlideShow(){ if (document.all){ document.images.PictureBox.style.filter="blendTrans(duration=2)"; document.images.PictureBox.style.filter="blendTrans(duration=CrossFadeDuration)"; document.images.PictureBox.filters.blendTrans.Apply();} document.images.PictureBox.src = preLoad[jss].src; if (document.getElementById) document.getElementById("CaptionBox").innerHTML= Caption[jss]; if (document.all) document.images.PictureBox.filters.blendTrans.Play(); jss = jss + 1; if (jss > (pss)) jss=1; tss = setTimeout('runSlideShow()', SlideShowSpeed); } [CODE] As I said, I have used this code on several websites & it is the focal point for a nice-looking display. Any input, help or advice is greatly appreciated. Hi there, I am currently creating my first ever website and I am attempting to put in some javascript but I am having trouble, would it be possible for someone to guide me. I am trying to implement a slideshow but at the moment all I am getting is the first picture only, here is the code... Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Lyons Design and Print</title>
<style type="text/css" media="all">
body
{
background-image:url('background.jpg');
}
.header {
font-size: 24pt;
font-weight: bold;
padding: 20px;
border-bottom: 1px solid #000;
text-align:center;
}
#nav {
margin:0;
padding:0;
float:left;
width:100%;
border:1px solid #42432d
border-width:1px 0;
text-align: center;
}
#nav li {
display:inline-block;
padding:0;
margin:0;
}
* html #nav li { display: inline; }
*+html #nav li { display: inline; }
#nav a:link,
#nav a:visited {
color:#000;
background:#0033CC;
padding:20px 40px 4px 10px;
float:left;
width:auto;
border-right:1px solid #42432d;
text-decoration:none;
font:bold 1em/1em Arial, Helvetica, sans-serif;
text-shadow: 2px 2px 2px #555;
}
#nav a:hover,
#nav a:focus {
color:#fff;
background:#0033CC;
}
#nav li:first-child a {
border-left:1px solid #42432d;
}
#home #nav-home a,
#large format printing #nav-large format printing a,
#scanning #nav-scanning a,
#thermal inkjet printing and plotting #nav-thermal inkjet printing and plotting a,
#large format photo copying #nav-large format photo copying a,
#contacts #nav-contacts a,
#about us #nav-about us a {
background:#e35a00;
color:#fff;
text-shadow:none;
}
#home #nav-home a:hover,
#large format printing #nav-large format printing a:hover,
#scanning #nav-scanning a:hover,
#thermal inkjet printing and plotting #nav-thermal inkjet printing and plotting a:hover,
#large format photo copying #nav-large format photo copying a:hover,
#contacts #nav-contacts a:hover,
#about us #nav-about us a:hover {
background:#e35a00;
}
#nav a:active {
background:#e35a00;
color:#fff;
}
p{
font-family: Verdana, Geneva, sans-serif;
font-style: oblique;
font-weight: normal;
font-size: 16px;
letter-spacing: normal;
line-height: normal;
text-transform: none;
text-decoration: none;
text-align: center;
}
p{
font-family: Verdana, Geneva, sans-serif;
font-style: oblique;
font-weight: normal;
font-size: 16px;
letter-spacing: normal;
line-height: normal;
text-transform: none;
text-decoration: none;
text-align: center;
}
<script type="text/javascript">
<!--
var image1=new Image()
image1.src="DesignPrinter.jpg"
var image2=new Image()
image2.src="print-design.jpg"
var image3=new Image()
image3.src="printingpress.jpg"
var image4=new Image()
image4.src="thermal.jpg"
//-->
</script>
<script>
<!--
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
slideit()
//-->
</script>
</style>
</head>
<body>
<div class="header"><img src="logo.jpg"></div>
<ul id="nav">
<li id="nav-Home"><a href="Home.html">Home</a></li>
<li id="nav-Large Format Printing"><a href="Large Format Printing.html">Large Format Printing</a></li>
<li id="nav-Scanning"><a href="Scanning.html">Scanning</a></li>
<li id="nav-Thermal Inkjet Printing and Plotting"><a href="Thermal Inkjet Printing and Plotting.html">Thermal Inkjet Printing and Plotting</a></li>
<li id="nav-Large Format Photo Copying"><a href="Large Format Photo Copying.html">Large Format Photo Copying</a></li>
<li id="nav-Contacts"><a href="#">Contacts</a></li>
<li id="nav-About Us"><a href="#">About Us</a></li></ul>
<table border="0" cellpadding="0" cellspacing="0" height="300"><tr><td id="maincontent" valign="top">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a. </p>
<p align="center"><img src="DesignPrinter.jpg" name="slide" width=300 height=300></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate </p>
<embed src="beatles.mid" width="144" height="60">
</body>
Thanks to Old Pedant , in this forum, I am using this basic code for a slideshow he posted: Code: var slides = [
[ "abc.jpg", 3000 ],
[ "xyz.png", 5000 ],
[ "foo.gif", 1500 ]
];
var curSlide = 0;
function nextSlide( )
{
document.getElementById("thePicture").src = slides[curSlide][0].src;
setTimeout( nextSlide, slides[curSlide][1] );
curSlide = ( curSlide + 1 ) % slides.length;
}
function setUp( )
{
for ( var s = 0; s < slides.length; ++s )
{
var image = new Image();
image.src = slides[s];
slides[s] = image;
}
nextSlide( );
}
window.onload = setUp;
which works just fine. But I can't find a way for it to play one round of the slides then stop. Could someone please help me with the right bit of code to stop the show? I know the code is a bit basic (no fades etc) but I have been unable to find a similar slideshow product that gives variable time delays for each slide. I've googled endlessly but nothing could i find.... TIA Richard ========= Hello, looking for simple javascript slideshow script, similar to this: http://www.jimex.co.jp/veh_details.php?id=4541 I like the mousover effect when the main image is changed once the mouse is over the thumbnails on the right hand side. Has anyone got something like this? Thanks |
|||||||