PDA

View Full Version : How Do I Replace Text Controls With Images



LEAD_WEIGHT
09-20-2005, 10:18 PM
This is the code I was looking @. I want to replace the text with images instead? Thxs in advance for help. :)


<div style="background-color:#FFFFDD;width:155px"><center><a href="javascript:movedown()">Down</a> <a href="javascript:moveup()">Up</a>
<a href="javascript:stopscroll()">Stop</a> <a href="javascript:movetop()">Top</a></center>
</div>

<SCRIPT language="JavaScript1.2">

//Manual Scroller- Dynamic Drive 2001
//For full source code, visit http://www.dynamicdrive.com

//specify speed of scroll (greater=faster)
var speed=2

iens6=document.all||document.getElementById
ns4=document.layers

if (iens6){
document.write('<div id="container" style="position:relative;width:155px;height:160px;overflow:hidden;border:2px ridge white">')
document.write('<div id="content" style="position:absolute;width:155px;left:0px;top:0px">')
}
</script>

<ilayer name="nscontainer" width=155 height=160 clip="0,0,155,160">
<layer name="nscontent" width=155 height=160 visibility=hidden>

<!--INSERT CONTENT HERE-->
<p><font size="2" face="Arial">-</font><font size="2" face="Arial"> DHTML is the
combination of HTML, JavaScript, and CSS</font></p>
<p><font size="2" face="Arial">- DOM stands for Document Object Model</font></p>
<p><font size="2" face="Arial">-</font><font size="2" face="Arial"> DHTML allows
content on a page to change on the fly, without reloading the page</font></p>
<p><font size="2" face="Arial">- CSS allows for the separation between content
definition and formatting</font></p>
<p><font size="2" face="Arial">- CSS stands for Cascading style sheet</font></p>
<p><font size="2" face="Arial">- </font><font size="2" face="Arial"><a href="http://www.dynamicdrive.com">Dynamic
Drive</a> provides free, cut and paste DHTML scripts</font></p>
<!--END CONTENT-->

</layer>
</ilayer>

<script language="JavaScript1.2">
if (iens6){
document.write('</div></div>')
var crossobj=document.getElementById? document.getElementById("content") : document.all.content
var contentheight=crossobj.offsetHeight
}
else if (ns4){
var crossobj=document.nscontainer.document.nscontent
var contentheight=crossobj.clip.height
}

function movedown(){
if (window.moveupvar) clearTimeout(moveupvar)
if (iens6&&parseInt(crossobj.style.top)>=(contentheight*(-1)+100))
crossobj.style.top=parseInt(crossobj.style.top)-speed+"px"
else if (ns4&&crossobj.top>=(contentheight*(-1)+100))
crossobj.top-=speed
movedownvar=setTimeout("movedown()",20)
}

function moveup(){
if (window.movedownvar) clearTimeout(movedownvar)
if (iens6&&parseInt(crossobj.style.top)<=0)
crossobj.style.top=parseInt(crossobj.style.top)+speed+"px"
else if (ns4&&crossobj.top<=0)
crossobj.top+=speed
moveupvar=setTimeout("moveup()",20)
}

function stopscroll(){
if (window.moveupvar) clearTimeout(moveupvar)
if (window.movedownvar) clearTimeout(movedownvar)
}

function movetop(){
stopscroll()
if (iens6)
crossobj.style.top=0+"px"
else if (ns4)
crossobj.top=0
}

function getcontent_height(){
if (iens6)
contentheight=crossobj.offsetHeight
else if (ns4)
document.nscontainer.document.nscontent.visibility="show"
}
window.onload=getcontent_height
</script>

jscheuer1
09-21-2005, 02:22 AM
In this case, just do exacty that. Replace the text, for example 'Stop' with an image:

<img src="stop.gif" />

LEAD_WEIGHT
09-21-2005, 02:34 AM
In this case, just do exacty that. Replace the text, for example 'Stop' with an image:

<img src="stop.gif" />

I did that and that why I ask the question, then I forgot about ' / ' Duh! . I seach through all the different codes and I had it almost right all this time. Thxs again. :D

Nope, it just gave me an error
Char: 53
Error: Expected ';'
Code: 0

LEAD_WEIGHT
09-21-2005, 02:43 AM
I did this but when I tried to add the images it just game me an error?
It works with text thou.

*edit
Never mind about this. I getting errors even when I revert to original code?



<!-- Latest Threads -->

<table align="center" border="0" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" class="tborder" width="100%">
<thead>
<tr>
<td class="tcat"><span class="smallfont"><strong>$vba_options[portal_blockbullet] <span class="smallfont"><strong>$vbphrase[latest_forum_topics]</strong></span></strong></span></td>
</tr>
</thead>
<tr>
<td class="$getbgrow" width="100%">


<SCRIPT language="JavaScript1.2">

//Manual Scroller- Dynamic Drive 2001
//For full source code, visit http://www.dynamicdrive.com

//specify speed of scroll (greater=faster)
var speed=2

iens6=document.all||document.getElementById
ns4=document.layers

if (iens6){
document.write('<div id="container" style="position:relative;width:100%;height:160px;overflow :hidden;border:2px ridge white">')
document.write('<div id="content" style="position:absolute;width:100%;left:0px;top:0px">')
}
</script>

<ilayer name="nscontainer" width=100% height=160 clip="0,0,100%,160">
<layer name="nscontent" width=100% height=160 visibility=hidden>



<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<if condition="$mods['modcol'] == 0">
<tr> <if condition="$vba_options['portal_threads_showicon']">
<td class="thead" width="5">&nbsp;</td>
</if>
<td class="thead" width="100%"><span class="smallfont">$vbphrase[title_username_date]</span></td>
<if condition="$show['lastpost']">
<td align="center" class="thead" nowrap="nowrap" width="25%"><span class="smallfont">$vbphrase[last_post]</span></td>
</if>
<td class="thead" width="15"><span class="smallfont">$vbphrase[replies]</span></td>
<td class="thead" width="15"><span class="smallfont">$vbphrase[views]</span></td>
<if condition="$vba_options['portal_threads_showforum']">
<td align="center" class="thead" width="10%"><span class="smallfont">$vbphrase[forum]</span></td>
</if> </tr>
</if>$threadbits
</table>



</layer>
</ilayer>

<script language="JavaScript1.2">
if (iens6){
document.write('</div></div>')
var crossobj=document.getElementById? document.getElementById("content") : document.all.content
var contentheight=crossobj.offsetHeight
}
else if (ns4){
var crossobj=document.nscontainer.document.nscontent
var contentheight=crossobj.clip.height
}

function movedown(){
if (window.moveupvar) clearTimeout(moveupvar)
if (iens6&&parseInt(crossobj.style.top)>=(contentheight*(-1)+100))
crossobj.style.top=parseInt(crossobj.style.top)-speed+"px"
else if (ns4&&crossobj.top>=(contentheight*(-1)+100))
crossobj.top-=speed
movedownvar=setTimeout("movedown()",20)
}

function moveup(){
if (window.movedownvar) clearTimeout(movedownvar)
if (iens6&&parseInt(crossobj.style.top)<=0)
crossobj.style.top=parseInt(crossobj.style.top)+sp eed+"px"
else if (ns4&&crossobj.top<=0)
crossobj.top+=speed
moveupvar=setTimeout("moveup()",20)
}

function stopscroll(){
if (window.moveupvar) clearTimeout(moveupvar)
if (window.movedownvar) clearTimeout(movedownvar)
}

function movetop(){
stopscroll()
if (iens6)
crossobj.style.top=0+"px"
else if (ns4)
crossobj.top=0
}

function getcontent_height(){
if (iens6)
contentheight=crossobj.offsetHeight
else if (ns4)
document.nscontainer.document.nscontent.visibility ="show"
}
window.onload=getcontent_height
</script>

<div style="background-color:#F7F9FF;width:100%">
<center>
<a href="javascript:movedown()"><img src="http://www.theundergroundsource.com/images/arrowbdown.gif" /></a>
<a href="javascript:moveup()"><img src="http://www.theundergroundsource.com/images/arrowbup.gif" /></a>
<a href="javascript:stopscroll()"><img src="http://www.theundergroundsource.com/images/stop.gif" /></a>
<a href="javascript:movetop()"><img src="http://www.theundergroundsource.com/images/home.gif" /></a>
</center>
</div>

</td>
</tr>
</table>
<br />

<!-- End Latest Threads -->

jscheuer1
09-21-2005, 07:16 AM
I'd start over fresh then on a blank page and just get the script working. If the script works, the simple substitution of an image tag for text in the html markup will make no difference.

LEAD_WEIGHT
09-21-2005, 10:40 AM
This as is works but I do not know why it stop working after I added images and I replace it with text again and it still stop working??? I think I have to remove the box outlining it.

http://www.dynamicdrive.com/dynamicindex2/manualscroll.htm