Javascript slideshow

U

UKAde

Can anyone tell me how I can edit the script below (which I got off the
net) so that any pictures shown are resized to 120px wide?

Thank you

Ade


<SCRIPT LANGUAGE="JavaScript">
<!--

/*
Script by FPMC at http://jsarchive.8m.com
Submitted to JavaScript Kit (http://javascriptkit.com)
For this and 400+ free scripts, visit http://javascriptkit.com
*/

//set image paths
src = ["image1.gif", "image2.gif", "image3.gif", "image4.gif"]


//set corresponding urls
url = ["http://freewarejava.com", "http://javascriptkit.com",
"http://dynamicdrive.com", "http://www.geocities.com"]

//set duration for each image
duration = 4;

//Please do not edit below
ads=[]; ct=0;
function switchAd() {
var n=(ct+1)%src.length;
if (ads[n] && (ads[n].complete || ads[n].complete==null)) {
document["Ad_Image"].src = ads[ct=n].src;
}
ads[n=(ct+1)%src.length] = new Image;
ads[n].src = src[n];
setTimeout("switchAd()",duration*1000);
}
function doLink(){
location.href = url[ct];
} onload = function(){
if (document.images)
switchAd();
}
//-->
</SCRIPT>

<A HREF="javascript:doLink();" onMouseOver="status=url[ct];return
true;"
onMouseOut="status=''">
<IMG NAME="Ad_Image" SRC="image1.gif" BORDER=0>
</A>

<p align="center"><font face="arial" size="-2">This free script
provided by <a href="http://javascriptkit.com">JavaScript
Kit</a></font></p>
 
A

ASM

UKAde said:
Can anyone tell me how I can edit the script below (which I got off the
net) so that any pictures shown are resized to 120px wide?

no need JS :

<style type:"text/css">
img { width: 120px }
</style>
 
U

UKAde

no need JS :

<style type:"text/css">
img { width: 120px }
</style>


Thanks for that, but I have other pictures on the page i don't want to
resize which means I have to apply a class to the pictures i the
slideshow and I don't know how to do that either!

Any more help gratefully received...

Thanks
 
E

Evertjan.

UKAde wrote on 13 jul 2005 in comp.lang.javascript:
<style type:"text/css">
img { width: 120px }
</style>


Thanks for that, but I have other pictures on the page i don't want to
resize which means I have to apply a class to the pictures i the
slideshow and I don't know how to do that either!

Any more help gratefully received...

Thanks

<style type:"text/css">
.small img, img.small { width: 80px }
</style>



<div class='small'>
<img src='img1.jpg'>
<img src='img2.jpg'>
<img src='img3.jpg'>
<img src='img4.jpg'>
</div>

<img src='normalImg.jpg'>

<img src='img5.jpg' class='small'>
<img src='img6.jpg' class='small'>
 
A

ASM

UKAde said:
<style type:"text/css">
img { width: 120px }
</style>


Thanks for that, but I have other pictures on the page i don't want to
resize which means I have to apply a class to the pictures i the
slideshow and I don't know how to do that either!

No to each image i
only to the image where slideshow is shown (Ad_image) :

<style type:"text/css">
#Ad_Image { width: 120px }
</style>
<A HREF="javascript:doLink();"
onMouseOver="status=url[ct];return true;"
onMouseOut="status=''">
<IMG NAME="Ad_Image" ID="Ad_Image" SRC="image1.gif" BORDER=0>
</A>

or directly without css:

<A HREF="javascript:doLink();"
onMouseOver="status=url[ct];return true;"
onMouseOut="status=''">
<IMG NAME="Ad_Image" SRC="image1.gif" BORDER=0
onload="this.width=120">
</A>
 
W

web.dev

Hi Ade,

You don't even need to edit the script. Just add the width attribute
to the img tag in your html:

before:
<img name = "Ad_Image" src = "image1.gif" border = "0">

after:
<img name = "Ad_Image" src = "image1.gif" border = "0" width = "120"/>

If you also prefer to do it via inline css:
<img name = "Ad_Image" src = "iamge1.gif" border = "0" style = "width:
120px"/>

Hope this helps. :)
 
A

Ade

web.dev said:
You don't even need to edit the script. Just add the width attribute
to the img tag in your html:

before:
<img name = "Ad_Image" src = "image1.gif" border = "0">

after:
<img name = "Ad_Image" src = "image1.gif" border = "0" width = "120"/>

If you also prefer to do it via inline css:
<img name = "Ad_Image" src = "iamge1.gif" border = "0" style = "width:
120px"/>

Hope this helps. :)

Ah! I didn't bother with that line because I thought
it only applied to the opening image. Problem solved.
Thank you!
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,769
Messages
2,569,579
Members
45,053
Latest member
BrodieSola

Latest Threads

Top