JavaScript - Javascript Slideshow Problem...

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.

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,

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've created a slideshow on our site using the java template at
http://www.javascriptkit.com/script/.../jsslide.shtml

Are there simple modifications I can make to this code in order to cause clicking on the image links to go straight to them, rather than creating a new window/tab?

Thanks for the help.

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

I am very new to Javascript - as in this is the first day I'm using it. I am using a code I got offline to fade three pictures together, but when it gets to the last image, it loops back to the first.

How do I code it so that when it gets to the last image, it stops?
Here is the code - sorry if its messy.

Javascript:

/*****

Image Cross Fade Redux
Version 1.0
Last revision: 02.15.2006
steve@slayeroffice.com

Please leave this notice intact.

Rewrite of old code found he http://slayeroffice.com/code/imageCrossFade/index.html


*****/


window.addEventListener?window.addEventListener("load",so_init,false):window.attachEvent("onload",so _init);

var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;

function so_init() {
if(!d.getElementById || !d.createElement)return;

// DON'T FORGET TO GRAB THIS FILE AND PLACE IT ON YOUR SERVER IN THE SAME DIRECTORY AS THE JAVASCRIPT!
// http://slayeroffice.com/code/imageCrossFade/xfade2.css
css = d.createElement("link");
css.setAttribute("href","xfade2.css");
css.setAttribute("rel","stylesheet");
css.setAttribute("type","text/css");
d.getElementsByTagName("head")[0].appendChild(css);

imgs = d.getElementById("imageContainer").getElementsByTagName("img");
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
imgs[0].style.display = "block";
imgs[0].xOpacity = .99;

setTimeout(so_xfade,3000);
}

function so_xfade() {
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;

nOpacity = imgs[nIndex].xOpacity;

cOpacity-=.05;
nOpacity+=.05;

imgs[nIndex].style.display = "block";
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;

setOpacity(imgs[current]);
setOpacity(imgs[nIndex]);

if(cOpacity<=0) {
imgs[current].style.display = "none";
current = nIndex;
setTimeout(so_xfade,3000);
} else {
setTimeout(so_xfade,50);
}

function setOpacity(obj) {
if(obj.xOpacity>.99) {
obj.xOpacity = .99;
return;
}

obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
}

}




HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<div class="container">

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="imagetoolbar" content="false" />
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="slideshow.js"></script>
<title>Diamonds in the Rough</title>
</head>

<body>

<div id="container">
<img src="images/top2.jpg" usemap="#Map2"/>
<map name="Map2" id="Map2">
<area shape="rect" coords="69,56,145,84" href="invite.html" rel="nofollow" target="_self" alt="The Gala" />
<area shape="rect" coords="171,53,356,87" href="diamonds.html" rel="nofollow" target="_self" alt="Diamonds in the Rough" />
<area shape="rect" coords="377,52,498,87" href="mariama.html" rel="nofollow" target="_self" alt="Speaker Mariama Elliot" />
<area shape="rect" coords="525,52,636,86" href="contact.html" rel="nofollow" target="_self" alt="Get Involved" />
</map>

<div id="imageContainer">
<img src="images/index.jpg"/>
<img src="images/index2.jpg"/>
<img src="images/invite.jpg"/>

</div>



<div id="container2">
<img src="images/BOTTOM.jpg"/>
</div>


</body>
</html>



Thanks for your help!

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.

Hello -

My question revolves around a photo slider that will automatically advance to the next photo in a matter of seconds. . .

Before you write this thread off as, 'GO GOOGLE IT, THERE'S TONS OF CODE ALREADY OUT THERE IN THREADS LIKE THIS'. . .

The tricky part of this is, I already have a photo slider that you advance by a button click and it transitions 2 portions of the page. It is a custom module in Joomla that just basically uses some custom HTML to display a picture on the left and text on the right. . .and you click the button and it advances to another picture and different text to match the image.


HERE IS MY CURRENT HTML THAT DISPLAYS THE IMAGE AND TEXT

Code:

<div class="images"><!-- first slide -->
<div><img class="img-slider" src="images/stories/slider_img_1.jpg" border="0" /> <span class="slider-text-indent">
<h3 class="slider-titile">We listen.</h3>
<span class="slider-text">Tired of unreliable computer consultants who are impossible to reach, nickel and dime you, and fail to deliver results that you deserve?<br /><br />ABC Computers is here to help you!</span> </span></div>
<!-- second slide -->
<div><img class="img-slider" src="images/stories/slider_img_2.jpg" border="0" /> <span class="slider-text-indent">
<h3 class="slider-titile">We Guarantee.</h3>
<span class="slider-text">We are committed to doing whatever is necessary, period. In our 25 history, we have never had a failed implementation; we guarantee yours will not be the first.</span> </span></div>
<!-- third slide -->
<div><img class="img-slider" src="images/stories/slider_img_3.jpg" border="0" /> <span class="slider-text-indent">
<h3 class="slider-titile">We Care.</h3>
<span class="slider-text">We treat your network as if it was our own. We protect your data as if it was ours. We don't look at your budget as a mine of money; we won't ask you to spend one dollar that we wouldn't spend on our own network!</span> </span></div>
</div>
<p><a class="backward">prev</a> <a class="forward">next</a></p>
<!-- the tabs -->
<div class="tabs"><a></a> <a></a> <a></a></div>

Again, I would like to make this advance automatically through javascript (or perhaps there's a better way). . . but I do not want to lose the functionality of moving it manually with the button too.


Is this possible to do and if so, does anyone have suggestions?

Typically this isn't an issue for me to figure out but since I already have it how the client wants it to look, they basically want it to move automatically as if someone pushed the button. . .but still keep the manual button to advance and reverse it.


Thank you in advance for any advice or help on this matter.

how do i make those two lines go away in the backround?



EDIT: UP! http://insidehb.com/main/default.html

EDIT: Now works with ie

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
=========

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

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 &copy; 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

Hi everyone,

How can I achieve this?

I need to get my drop down menu go over the javascript slideshow going on in this page: www.kimikal.com/store

It works on all browsers except for IE, which hides the menu behind the js slideshow.

Any help would be greatly appreciated!

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>