469,607 Members | 2,088 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,607 developers. It's quick & easy.

Javascript slideshow

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>

Jul 23 '05 #1
6 1590
ASM
UKAde wrote:
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>

--
Stephane Moriaux et son [moins] vieux Mac
Jul 23 '05 #2
>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
*** Sent via Developersdex http://www.developersdex.com ***
Jul 23 '05 #3
UKAde wrote on 13 jul 2005 in comp.lang.javascript:
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


<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'>
--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)

Jul 23 '05 #4
ASM
UKAde wrote:
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!


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>
--
Stephane Moriaux et son [moins] vieux Mac
Jul 23 '05 #5
Hi Ade,
edit the script below (which I got off the net) so that any pictures shown are resized to 120px wide?


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. :)

Jul 23 '05 #6
Ade
web.dev wrote:
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!
Jul 23 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

6 posts views Thread by Terry | last post: by
6 posts views Thread by Dan Webb | last post: by
4 posts views Thread by CB US 77 | last post: by
22 posts views Thread by bevoldjling | last post: by
1 post views Thread by gencode | last post: by
3 posts views Thread by Gaby Sandoval | last post: by
3 posts views Thread by krzysztof.murkowski | last post: by
reply views Thread by gheharukoh7 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.