PDA

View Full Version : Location of images in script?



themaclady
11-08-2005, 10:33 AM
I don't know if this question is allowed or not:

I have this script working:

http://www.dynamicdrive.com/dynamicindex14/multiframeslide.htm

But it won't allow me to put the images in the PROPER LOCATION!

Here is the page where the graphics are in simple tables:

http://www.madonnalovettrepeta.com/

and here is the way I have done the rotations:

http://www.madonnalovettrepeta.com/test3.html

So how do I get them in the locations they need to be???

jscheuer1
11-11-2005, 04:17 AM
I had noticed this post a little while back but lost track of it. I am posting here to mark it. I'm going to take a crack at it soon.

jscheuer1
11-11-2005, 05:06 AM
Try out this demo, if you add more table cells/images to display, you must create the new table cells in the HTML code and assign them incremental id's (highlighted red) as in this demo (see additional notes at bottom):


<html>
<head>
<title>TESTING ROTATION</title>
<style type="text/css">

/*set CSS for SPAN tag surrounding each image*/
.seqslidestyle{
}
</style>
</head>

<body bgcolor="black">

<br><br>
<center>
<table width="740" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="740" colspan="4" bgcolor="#000000">&nbsp;</td>
</tr>
<tr>
<td id="m0" width="185" valign="top" bgcolor="#cccccc"><img src="images/alligator.jpg" width="185" height="200" class="main"></td>
<td width="185" valign="top" bgcolor="#000000">&nbsp;</td>
<td id="m1" width="185" valign="top" bgcolor="#cccccc"><img src="images/bird.jpg" width="185" height="200" class="main"></td>
<td width="185" valign="top" bgcolor="#000000">&nbsp;</td>
</tr>
<tr>

<td width="185" valign="top" bgcolor="#000000">&nbsp;</td>
<td id="m2" width="185" valign="top" bgcolor="#cccccc"><img src="images/portrait.jpg" width="185" height="200" class="main"></td>
<td width="185" valign="top" bgcolor="#000000">&nbsp;</td>

<td id="m3" width="185" valign="top" bgcolor="#cccccc"><img src="images/window.jpg" width="185" height="200"class="main"></td>

</tr>
<tr>
<td width="740" colspan="4" bgcolor="#000000">&nbsp;</td>
</tr>

</table>

<script type="text/javascript">

/***********************************************
* MultiFrame Image Slideshow script- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var seqslides=new Array()
//Set Path to Image plus optional URL ("" for no URL):
seqslides[0]=["images/alligator.jpg", ""]
seqslides[1]=["images/bird.jpg", ""]
seqslides[2]=["images/bee.jpg", ""]
seqslides[3]=["images/window.jpg", ""]
seqslides[4]=["images/bird.jpg", ""]


//Set pause between each image display (7000=7 second):
var slidedelay=3000

//Set how many images to show at once (must be less than total # of images above):
var slidestoreveal=4

//Specify code to insert between each slide (ie: "<br>" to insert a line break and create a vertical layout)
//"" for none (or horizontal):
var slideseparater=""

//Set optional link target to be added to all images with a link:
var optlinktarget="secwindow"

//Set image border width:
var imgborderwidth=0

//Set opacity value of each image when it's "dimmed", and when it's not, respectively (1=100% opaque/normal).
//Change 0.2 to 0 to completely hide image when it's dimmed:
var opacityvalues=[0.2,1]

///No need to edit beyond here///////////

function processimgcode(theimg){
var imghtml=""
if (theimg[1]!="")
imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'" style="filter:alpha(opacity='+(opacityvalues[0]*100)+');-moz-opacity:'+opacityvalues[0]+'">'
if (theimg[1]!="")
imghtml+='</a>'
return imghtml
}

var curslide=1 //var to track current slide (total: slidestoreveal)
var curimgindex=0 //var to track current image (total: seqslides.length)
var isfirstcycle=1 //boolean to indicate whether this is the first cycle

if (document.getElementById){
for (i=0;i<slidestoreveal;i++)
document.getElementById('m'+i).innerHTML='<span id="seqslide'+i+'" class="seqslidestyle">'+processimgcode(seqslides[i])+'</span>'+slideseparater
curimgindex=slidestoreveal
illuminateslide(0,opacityvalues[1])
}

function illuminateslide(slideindex, amt){
var slideobj=document.getElementById("seqslide"+slideindex).getElementsByTagName("IMG")[0]
if (slideobj.filters)
slideobj.filters.alpha.opacity=amt*100
else if (slideobj.style.MozOpacity)
slideobj.style.MozOpacity=amt
}

function displayit(){
if (curslide<slidestoreveal){
if (!isfirstcycle)
changeimage(curslide)
illuminateslide(curslide, opacityvalues[1])
curslide++
}
else{
isfirstcycle=0
for (i=0;i<slidestoreveal;i++)
illuminateslide(i, opacityvalues[0])
changeimage(0)
illuminateslide(0, opacityvalues[1])
curslide=1
}
}

function changeimage(slideindex){
document.getElementById("seqslide"+slideindex).innerHTML=processimgcode(seqslides[curimgindex])
curimgindex++
if (curimgindex>=seqslides.length)
curimgindex=0
}

if (document.getElementById)
setInterval("displayit()",slidedelay)


</script>

</body>
</html>

Notes: Script is edited, do not use the original. The style section at the top of this demo is no longer needed, unless you want to use it for something else. The script must follow the table container in the code as shown above. The actual images in the table are just placeholders now but, should remain for non-javascript enabled browsers. If you want the dark background for the images when they are washed out, set it to #000000 in the table cells.

themaclady
11-11-2005, 05:37 AM
Thanks but I don't get it....
The squares are in a simple staggered design and I have no idea what a span ID is.
They have to fit into the first page design of that URL you saw.

jscheuer1
11-11-2005, 06:20 AM
Using a text editor, substitute my table for your table that looks like this:


<table width="740" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="740" colspan="4" bgcolor="#000000">&nbsp;</td>
</tr>
<tr>
<td width="185" valign="top" bgcolor="#cccccc"><img src="images/alligator.jpg" width="185" height="200" class="main"></td>
<td width="185" valign="top" bgcolor="#000000">&nbsp;</td>
<td width="185" valign="top" bgcolor="#cccccc"><img src="images/bird.jpg" width="185" height="200" class="main"></td>
<td width="185" valign="top" bgcolor="#000000">&nbsp;</td>
</tr>
<tr>

<td width="185" valign="top" bgcolor="#000000">&nbsp;</td>
<td width="185" valign="top" bgcolor="#cccccc"><img src="images/portrait.jpg" width="185" height="200" class="main"></td>
<td width="185" valign="top" bgcolor="#000000">&nbsp;</td>

<td width="185" valign="top" bgcolor="#cccccc"><img src="images/window.jpg" width="185" height="200"class="main"></td>

</tr>
<tr>
<td width="740" colspan="4" bgcolor="#000000">&nbsp;</td>
</tr>

</table>

on the page at http://www.madonnalovettrepeta.com/

Then take the script from my demo and put it below that. Or, to get an idea of what I've done, just copy my entire demo and save it in a text editor as an html page in the same directory as your two other pages in this thread (the local directory is fine for demo purposes). If it doesn't have the right layout, something is wrong on your end. If so, let me know and I'll put up a live demo.