/    Sign up×
Community /Pin to ProfileBookmark

simple slideshow–how to assign images

Copy linkTweet thisAlerts:
Mar 06.2008

Hi,

I am looking at this code and I can’t figure out how to assign the right page/image to the code so that I can create a simple slideshow to transition pages with numbers [1 2 3 4…>>>] thanks,
Sheila

<!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>Untitled Document</title>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
</head>
<body class=”sub”>
<table width=”90%” border=”0″ cellspacing=”2″ cellpadding=”4″ style=”text-align: center”>
<tr>
<td colspan=”2″ style=”vertical-align: top”><img src=” ” alt=” image” name=”image” width=”300″ height=”200″ id=”image” /></td>
<td style=”vertical-align: top” width=”100%” class=”StoryContentColor”>
<h4 class=”TitleColor”>Title</h4>
sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </td>
</tr>
</table>
<hr width=”90%” size=”1″ style=”text-align: center” noshade=”noshade” />

<table width=”90%” border=”0″ cellspacing=”0″ cellpadding=”4″ style=”text-align: center”>
<tr>
<td width=”20%” style=”style=”white-space:=”white-space:” nowrap=”nowrap””>
<a href=”#”>&lt;&lt; Previous</a> </td>
<td style=”text-align: center” width=”60%” class=”NavigationColor”>
<a href=”#”>1</a> 2 <a href=”#”>3</a> <a href=”#”>4</a> <a href=”#”>5</a> </td>
<td style=”text-align: right” width=”20%”>
<a href=”#”>Next &gt;&gt;</a> </td>
</tr>
</table>
</body>
</html>

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@JMRKERMar 06.2008 — See if you can modify you code with this information:

See: http://javascript.internet.com/image-effects/simple-image-gallery.html

or any of these: http://www.nova.edu/optometry/pharmacy/old/index.html

Good Luck! ?
Copy linkTweet thisAlerts:
@ShampieMar 07.2008 — I made a slideshow that uses more css in combination with javascript and it allows a lot easier editting.

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

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

</head>

<style>

td.pic{

width:300px;

background-image:url(../image/flam.gif);

background-repeat:repeat-x;

font-family:Verdana;

font-size:12px;

vertical-align:middle;

height:102px;

}

img.plot{

width:90px;

height:90px;

float:left;

clear:left;

padding: 2px 8px 2px 4px; /* pic top ,between pic & txt,*/

}

img.ximg{

width:150px;

height:150px;

float:left;

clear:left;

padding: 2px 8px 2px 4px; /* pic top ,between pic & txt,*/

}

span.ximg{

width:450px;

height:150px;

background-repeat:repeat-x;

font-family:Verdana;

font-size:12px;

vertical-align:middle;

height:102px;

}

.daemonbtn{

margin: 0px 4px 0px 4px;

text-align:center;

float:left;

background-color:#330000;

display:block;

color:white;

width:70px;

height:18px;

font-size:12px;

letter-spacing : -1px;

}

</style>

=====SCRIPT IN NEXT POST=======

<body>

<p>

<div style="width:600px;height:20px;">

<span style="margin: 0px 4px 0px 4px;text-align:center;float:left;background-color:#330000;background-image:url(../image/butimg.gif);display:block;color:white;width:80px;height:18px;font-size:12px;" onmouseover="this.style.backgroundColor='#660000'" onmouseout="this.style.backgroundColor='#330000'" id="o1" onclick="jumpto('pallas')">Lords of the Ring</span>

<span style="float:left;text-indent:15px;background-color:#330000;background-image:url(../image/butimg.gif);display:block;color:white;width:80px;height:18px;font-size:12px;" onmouseover="this.style.backgroundColor='#660000'" onmouseout="this.style.backgroundColor='#330000'" id="o1" onclick="jumpto('pantius')">Pantius</span>

<span style="float:left;text-indent:15px;background-color:#330000;background-image:url(../image/butimg.gif);display:block;color:white;width:80px;height:18px;font-size:12px;" onmouseover="this.style.backgroundColor='#660000'" onmouseout="this.style.backgroundColor='#330000'" id="o1" onclick="jumpto('pallantis')">Pallantis</span>

<span style="float:left;text-indent:15px;background-color:#330000;background-image:url(../image/butimg.gif);display:block;color:white;width:80px;height:18px;font-size:12px;" onmouseover="this.style.backgroundColor='#660000'" onmouseout="this.style.backgroundColor='#330000'" id="o1" onclick="jumpto('gaia')">Gaia</span>

<span style="float:left;text-indent:15px;background-color:#330000;background-image:url(../image/butimg.gif);display:block;color:white;width:80px;height:18px;font-size:12px;" onmouseover="this.style.backgroundColor='#660000'" onmouseout="this.style.backgroundColor='#330000'" id="o1" onclick="jumpto('athens')">Athens</span>

<span style="float:left;text-indent:15px;background-color:#330000;background-image:url(../image/butimg.gif);display:block;color:white;width:80px;height:18px;font-size:12px;" onmouseover="this.style.backgroundColor='#660000'" onmouseout="this.style.backgroundColor='#330000'" id="o1" onclick="jumpto('pandion')">Pandion</span>

<span style="float:left;text-indent:15px;background-color:#330000;background-image:url(../image/butimg.gif);display:block;color:white;width:80px;height:18px;font-size:12px;" onmouseover="this.style.backgroundColor='#660000'" onmouseout="this.style.backgroundColor='#330000'" id="o1" onclick="jumpto('phenom')">Phenom</span>

<div id="mo" style="float:left;vertical-align:middle; background:black; width:370px; height:150px;">





<div id="ball" style="vertical-align:middle;overflow:hidden;margin-left:10px;margin-right:10px;width:350px;height:105px;color:white;">

<table border="0" cellpadding="0" cellspacing="0">

<tr>

<td class="pic"><span onclick="enlarge(this);"><img class="plot" src="http://photos-c.ak.facebook.com/photos-ak-sctm/v184/21/118/739555045/n739555045_2037318_2091.jpg" />Pallas:<br /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem.</span></td>

<td class="pic"><span onclick="enlarge(this);"><img class="plot" src="http://upload.wikimedia.org/wikipedia/en/e/e5/FunkyFreshFew_Stealing_albumcover.jpg" />Pantius: <br /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, Vivamus ut sem. </span></td>

<td class="pic"><span onclick="enlarge(this);"><img class="plot" src="http://store.digitalscrapbookplace.com/images/55_K_1FunkyPageKit.jpg" />Pallantis: <br />

Fusce aliquam nunc vitae purus. Nunc venenatis enim nec quam. </span></td>

<td class="pic"><span onclick="enlarge(this);"><img class="plot" src="http://www.paulaltobelli.com/uploaded_images/funky_friday-719264.gif" />Gaia: <br />Cras faucibus, in condimentum augue lorem non tellus. </span></td>

<td class="pic"><span onclick="enlarge(this);"><img class="plot" src="http://funkylondon.podomatic.com/2006-03-05T07_57_15-08_00.jpg" />Athens: <br />

Lorem ipsum dolor sit amet, auctor quis, purus. Vivamus ut sem.</span></td>

<td class="pic"><span onclick="enlarge(this);"><img class="plot" src="http://www.funkysalsa.co.uk/images/logos/funky%2520blue.JPG" />Pandion: <br />Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. </span></td>

<td class="pic" ><span onclick="enlarge(this);"><img class="plot" src="http://www.varnavto.com/hqwp/widescreen/2006_lamborghini_murcielago_lp640_2.jpg" />Phantom: <br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem.</span></td>

</tr>

<tr>

<td colspan="7" ><img style="width:2462px;height:1px;background:black;" src="image/blank.gif" /></td>

</tr>

</table>

</div>

<div style="overflow:scroll;vertical-align:middle;background:black;width:580px;height:300px;"><img id="imgh" src="image/blank.gif" width="600" height="290" alt="" style="border-width:2px;border-color:#FFFFFF;border:dashed;padding: 10px 10px 10px 10px;"/>

</div>

</div></p>

</body>

</html>
[/QUOTE]

Note: Make sure to replace the blank.gif so that it WILL display (else it will look really bad in Firefox.

have fun!
Copy linkTweet thisAlerts:
@ShampieMar 07.2008 — <script>

function scrollz(to){ //<input name="button" type="button" id="bl" style="font-size:10px;color:red;height:16px;" onmouseover="document.getElementById('bl').style.color='green';scrollz(-5);" onmouseout="document.getElementById('bl').style.color='red';" value="<<" />

if (to != 0 && document.getElementById('bl').style.color == "green" || document.getElementById('br').style.color == "green"){

document.getElementById('ball').scrollLeft += to;

setTimeout("scrollz("+to+")",14);

}

else {

document.getElementById('bl').style.color = "red";

document.getElementById('br').style.color = "red";

}}


function goscrl(point){

if (document.getElementById('ball').scrollLeft < point){

document.getElementById('ball').scrollLeft += 15;

if (document.getElementById('ball').scrollLeft >= point){

document.getElementById('ball').scrollLeft = point;

}

setTimeout("goscrl("+point+")",14);

}

else if (document.getElementById('ball').scrollLeft > point){

document.getElementById('ball').scrollLeft -= 15;

if (document.getElementById('ball').scrollLeft <= point){

document.getElementById('ball').scrollLeft = point;

}

setTimeout("goscrl("+point+")",20);

}

}

function enlarge(f,z){

if (z < 1){

img_ld(z);

}

else{

datasource = f.innerHTML;

var num = datasource.split('src="');

var ex = num[1].split('">')

document.getElementById("imgh").src = ex[0];

}}

function jumpto(name){


var loc = new Array(7) // cds = (350i)+(2i)

loc[0] = {name:"pallas", cds:0}

loc[1] = {name:"pantius", cds:352}

loc[2] = {name:"pallantis", cds:704}

loc[3] = {name:"gaia", cds:1056}

loc[4] = {name:"athens", cds:1408}

loc[5] = {name:"pandion", cds:1760}

loc[6] = {name:"phenom", cds:2112}

for (i=0; i<7; i++){

if (loc[i].name == name){

num = Math.round(350*i) + Math.round(2*i);

goscrl(num);

//goscrl(loc[i].cds);

}

}



}



function popthis(source){

document.getElementById("galcon").innerHTML = '<table style="overflow:hidden;"><div ><img src='+source+' /></div></table>';

}

</script>
×

Success!

Help @sheila-k spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...