PDA

View Full Version : Wrapping Text around a slide show



hiker
09-15-2005, 05:00 PM
Script Fade in slide show
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

I was wondering if i could wrap text around a slideshow within a table cell.
url:
http://www.docsplacepittsburgh.com/index.html

related html:

<td width="380" bgcolor=#990033 valign="top">
<script language="JavaScript1.2" type="text/javascript">

/***********************************************
* Fade-in 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 slideshow_width='190px' //SET IMAGE WIDTH
var slideshow_height='145px' //SET IMAGE HEIGHT
var pause=3000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)

var fadeimages=new Array()
//SET 1) IMAGE PATHS, 2) optional link, 3), optional link target:
fadeimages[0]=["button.wbimg/street.JPG", "", ""] //plain image syntax
fadeimages[1]=["button.wbimg/dsbar.JPG", "http://www.docsplacepittsburgh.com", ""] //image with link syntax
fadeimages[2]=["button.wbimg/out.JPG","",""] //
fadeimages[3]=["button.wbimg/out1.JPG", "", ""] //

////NO need to edit beyond here/////////////

var preloadedimages=new Array()
for (p=0;p<fadeimages.length;p++){
preloadedimages[p]=new Image()
preloadedimages[p].src=fadeimages[p][0]
}

var ie4=document.all
var dom=document.getElementById

if (ie4||dom)
document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10;visibility: hidden"></div></div>')
else
document.write('<img name="defaultslide" src="'+fadeimages[0][0]+'">')

var curpos=10
var degree=10
var curcanvas="canvas0"
var curimageindex=0
var nextimageindex=1

function fadepic(){
if (curpos<100){
curpos+=10
if (tempobj.filters)
tempobj.filters.alpha.opacity=curpos
else if (tempobj.style.MozOpacity)
tempobj.style.MozOpacity=curpos/101
}
else{
clearInterval(dropslide)
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML=insertimage(nextimageindex)
nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 0
var tempobj2=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj2.style.visibility="hidden"
setTimeout("rotateimage()",pause)
}
}

function insertimage(i){
var tempcontainer=fadeimages[i][1]!=""? '<a href="'+fadeimages[i][1]+'" target="'+fadeimages[i][2]+'">' : ""
tempcontainer+='<img src="'+fadeimages[i][0]+'" border="0">'
tempcontainer=fadeimages[i][1]!=""? tempcontainer+'</a>' : tempcontainer
return tempcontainer
}

function rotateimage(){
if (ie4||dom){
resetit(curcanvas)
var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
tempobj.style.visibility="visible"
var temp='setInterval("fadepic()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else
document.images.defaultslide.src=fadeimages[curimageindex][0]
curimageindex=(curimageindex<fadeimages.length-1)? curimageindex+1 : 0
}

function resetit(what){
curpos=10
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
if (crossobj.filters)
crossobj.filters.alpha.opacity=curpos
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=curpos/101
}

function startit(){
var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.innerHTML=insertimage(curimageindex)
rotateimage()
}

if (ie4||dom)
window.onload=startit
else
setInterval("rotateimage()",pause)

</script>
<b>
Now celebrating 20 years in the heart of Shadyside, Doc's Place is known to locals as one of the best singles spots in town. From the upstairs HideAway (non- smoking martini bar), to the heated, outside deck, to the classic, main bar downstairs, Doc's Place offer's something for everyone. Though known for it's atmosphere, Doc's place has great food too. An extensive menu compliments the diversity of people that you might otherwise not expect to see in downtown Shadyside. Oh, and don't forget the game! Doc's place has several TV's and satellite and is sure to be showing the game that you are looking to watch. From a night out with friends to a private, catered event, Doc's Place in Shadyside is simply your best choice. Stop in and see for yourself!

</td>
Thanks,
Hiker

jscheuer1
09-15-2005, 05:26 PM
Most likely this can be accomplished using the 'float' property and possibly the 'clear' property of the style attribute(s) for the text and possibly the script itself. To do that, you will need to wrap the text in a division to give it style:

<div style="float:left">

text goes here

</div>

Try that, also try float:right. Also try putting this text division before the script in the cell using left then right for float, to see what that gets you. If none of these four 'gets it' then try applying the float to the script as well. Do it the same way, wrap the script in a division and give that division the style as mentioned for the text. You may have to play around a bit, floating one left, the other right, floating one but not the other, putting one first in the cell, then the other etc., checking it in the browser(s) to see what each looks like.

hiker
09-15-2005, 08:46 PM
That worked! (wrapping a div around the script and one around the text, floated in different directions) Thank you. For style reasons, i decided not to wrap the text, but certainly will use this in the future.
Kind Rgds,
Hiker