First time here? Check out the FAQ!
x

Do you know how I can place an image on one web page with arrows and make the image change each time you click the "next" arrow?

0 votes
asked by (120 points) about Adobe Dreamweaver
edited by

Do you know how I can place an image on one web page with arrows and make the image change each time you click the "next" arrow? Do you have to make a new HTML page for each time the image changes, or can they all somehow be embedded into one page?

2 Answers

0 votes
answered by (3.1k points)
edited by

Yeah, depending on what exactly you want (smooth flash appeal with longer load times, or simply fast html) you can find codes or even a generator. Simple google "webiste slideshow code". That should help you. Please do not hesitate to contact me, if you have any further questions.

0 votes
answered by (2.1k points)

You will have to implement a Javascript on your HTML page for this to be possible, it's really not that hard if you follow the steps.
On the page you want to add your slideshows implement the following code:

<title>Slideshow</title>

<style type="text/css">


* {
font-family:calibri,arial;
font-size:16pt;
}

div#show {
background-color:#efefe7;
width:400px;
margin:0; padding:2px;
border:1px solid #909090;
}

div#show table input,  div#show4 table input {
outline-style:none;
}

</style>

<!--[if IE]>
<style type="text/css">
div#show table td, div#show4 table td {
height:21px;
}
</style>
<![endif]-->

<script src="swissarmy.js" type="text/javascript"></script>

<script src="slideshow.js" type="text/javascript"></script>

</head>

<body style="margin:0; padding:0;">

<div id="show"><script type="text/javascript">new inter_slide(slideShow)</script></div>

</body>

</html>


}

Now you will need to download a file, "the engine" of the script from the developers website, called swissarmy.js.

And the last thing you need to do , and also to edit , create a file name slideshow.js and implement this code:

var preload_ctrl_images=false;


var previmg='left.png';
var stopimg='stop.png';
var playimg='play.png';
var nextimg='right.png';

var slideShow=[]; 


slideShow[0] = ["yourimage.jpg", "Image name", "http://www.imagelink.com", "_new", "top=250, left=300, width=500, height=300, location, resizable, scrollbars"];
slideShow[1] = ["yourimage2.jpg", "Image name 2"];
slideShow[2] = ["yourimage3.jpg", "Image name 3", "http://www.imagelink.com"];
slideShow[3] = ["yourimage4.jpg", "Image name 4", "http://www.imagelink.com", "_new"];
slideShow[4] = ["yourimage5.jpg", "Image name 5"];
slideShow[5] = ["yourimage6.jpg", "Image name 6", "http://www.imagelink.com", "_new"];



slideShow.no_descriptions=0; //use for no descriptions displayed
slideShow.pause=1; //use for pause onmouseover
slideShow.image_controls=1; //use images for controls
slideShow.button_highlight='#ffcccc'; //onmouseover background-color for image buttons (requires image_controls=1)
slideShow.specs='width=300, height=250' //global specifications for this show's new window(s)
slideShow.random=0; //set a random slide sequence on each page load
slideShow.manual_start=1; //start show in manual mode (stopped)
slideShow.delay=2000; //sets miliseconds delay between slides
slideShow.no_added_linebreaks=1; //use for not adding line breaks in formatting of texts and controls

I know this seems like a lot, but I tried to make it more easier for you to follow. In this last file you can control what your gallery will show, and how.
To add your images to the gallery , simply edit "yourimage.jpg" with the name if your image file and make sure they are in the same directory with the script , next you can set a name for it that will be displayed on the slideshow. To add more slideshows, simply continue and add "slideShow[6]" bellow "slideShow[5]".
Optionally you can add links to your images , but if you don't wish too, just leave the code of the image slideshow like this : slideShow[1] = ["yourimage2.jpg", "Image name 2"]; ,removing any other code.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.
Anti-spam verification:
To avoid this verification in future, please log in or register
...