Results 1 to 6 of 6

Thread: How Do I Replace Text Controls With Images

  1. #1
    Join Date
    Sep 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default How Do I Replace Text Controls With Images

    This is the code I was looking @. I want to replace the text with images instead? Thxs in advance for help.
    Code:
    <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>

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    In this case, just do exacty that. Replace the text, for example 'Stop' with an image:

    <img src="stop.gif" />
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Sep 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1
    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.

    Nope, it just gave me an error
    Char: 53
    Error: Expected ';'
    Code: 0
    Last edited by LEAD_WEIGHT; 09-21-2005 at 02:39 AM.

  4. #4
    Join Date
    Sep 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?

    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 -->
    Last edited by LEAD_WEIGHT; 09-21-2005 at 02:57 AM.

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Sep 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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/dynamici...nualscroll.htm

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •