Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Oct 2006
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    onmouse roll over image buttons, need text label overlay

    I searched the forum, and did not find an example for adding text overlays over buttons with the onmouseover/out attribute. The example that I’ve included, changes the button images from grey to red, and it works great. What I need to know, is how to overlay text over these changing images without having to create many gif images with the text labels over them. This would be very time consuming to get the text just right in each image. For the text over the buttons I would like to use MS Sans Serif 10pt, center/middle justified, color white without underline, and the text label will always be the same per each button. i.e. "Link to This", "Link to That", "Link to Other", etc. The image buttons are 200 x 20 to fit most of the text label phrases that I may be using.
    Another option that I tried was creating an invisible table with one column of several 200 x 20 cell rows with each background set to the GreyBtn200x20.gif image button. This way I can easily overlay and justify text labels center/middle. The text labels are just plain text. I tried several ways to have the cells background change and trigger the mouseover/out event and link to another URL without success.
    “A picture is worth a thousand words”: On the first page of my website, link is below, I painstakingly painted in the words “Show It” on my mouseover/out button images with text shadows. This took a while to do. I’d like to be able to add a left side menu, sort of like that concept, without having to create separate images for each text label button change.
    Thank you for your help.

    Here is the link: http://web2.airmail.net/terrycad/index.htm

    Here are the links to the two image buttons:

    http://web2.airmail.net/terrycad/Ima...yBtn200x20.gif

    http://web2.airmail.net/terrycad/Ima...dBtn200x20.gif

    Code:
    <html>
    <head>
    <title>OnMouseButtons</title>
    </head>
    <body bgcolor="#000000">
    
    <a href="ThisUrl.htm" 
    onMouseOver="document.n001.src='RedBtn200x20.gif';" 
    onMouseOut="document.n001.src='GreyBtn200x20.gif';">
    <img src="GreyBtn200x20.gif" name="n001" border="0" width="200" height="20"></a><br>
    
    <a href="ThatUrl.htm" 
    onMouseOver="document.n002.src='RedBtn200x20.gif';" 
    onMouseOut="document.n002.src='GreyBtn200x20.gif';">
    <img src="GreyBtn200x20.gif" name="n002" border="0" width="200" height="20"></a><br>
    
    <a href="OtherUrl.htm" 
    onMouseOver="document.n003.src='RedBtn200x20.gif';" 
    onMouseOut="document.n003.src='GreyBtn200x20.gif';">
    <img src="GreyBtn200x20.gif" name="n003" border="0" width="200" height="20"></a><br>
    
    </body>
    </html>

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Use some CSS classes, use the gifs as backgrounds of some DIVs and simply write the text inside the div. Use javascript only to switch classes:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="txt/javascript">
    <style type="text/css">
    .gray{
    	background: url(GreyBtn200x20.gif) no-repeat left top;
    }
    .red{
    	background: url(RedBtn200x20.gif) no-repeat left top;
    }
    .but{
    	width:200px;
    	height:20px;
    	color:#FFFFFF;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	text-decoration: none;
    	text-align:center;
    }
    .but a{
    line-height:20px;/* this value should be the same as the div's height to keep text on the middle*/
    }
    .but a:visited{
    	color:#FFFFFF;
    	text-decoration: none;
    }
    .but a:link{
    	color:#FFFFFF;
    	text-decoration: none;
    }
    </style>
    </head>
    <body>
    <div class="but gray" onmouseover="this.className='but red'" onmouseout="this.className='but gray'"><a href="#">Link to this</a></div>
    <br>
    <div class="but gray" onmouseover="this.className='but red'" onmouseout="this.className='but gray'"><a href="#">Link to that</a></div>
    <br>
    <div class="but gray" onmouseover="this.className='but red'" onmouseout="this.className='but gray'"><a href="#">Link to other</a></div>
    </body>
    </html>
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    New Coder
    Join Date
    Oct 2006
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up onmouse roll over image buttons, need text label overlay

    Thank you very much for your coding solution. It works great! You have been very helpful and I sent in your nomination.
    Thanks,
    Terry Cadd

  • #4
    New Coder
    Join Date
    Oct 2006
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question onmouse rool over image buttons, how to change a paragraphs text color

    I've added a small example of my code to test. Is there an attribute to center the buttons in a column that is wider than the buttons? I tried a few things on my web site and resorted to putting the button code inside a 1 celled column and center justifying it in a wider column.
    Also in the test code below, I sure would like to be able to highlight the paragraph text in yellow, next to the button as the mouse moves over the associated button.
    Here are the links to the two new buttons:
    http://web2.airmail.net/terrycad/GreyBtn105x20.gif
    http://web2.airmail.net/terrycad/RedBtn105x20.gif
    Here is my test code:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>OnMouseParagraphs</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="txt/javascript">
    <style type="text/css">
    .gray{
    	background: url('GreyBtn105x20.gif') no-repeat left top;
    }
    .red{
    	background: url('RedBtn105x20.gif') no-repeat left top;
    }
    .btn{
    	width:105px;
    	height:20px;
    	color:#FFFFFF;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	text-decoration: none;
    	text-align:center;
    }
    .btn a{
    line-height:20px;/* this value should be the same as the div's height to keep text on the middle*/
    }
    .btn a:visited{
    	color:#FFFFFF;
    	text-decoration: none;
    }
    .btn a:link{
    	color:#FFFFFF;
    	text-decoration: none;
    }
    </style>
    </head>
    <body bgcolor="#000080">
    <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" height="73">
      <tr>
        <td width="15%" height="16">
        <p align="center"><b><font face="Arial" size="2" color="#FF0000">Title of This Column</font></b></td>
        <td width="85%" height="16">
        <p align="center"><b><font face="Arial" size="2" color="#FF0000">Title of This Other Column</font></b></td>
      </tr>
      <tr>
        <td width="15%" height="19">
        <div class="btn gray" onmouseover="this.className='btn red'" onmouseout="this.className='btn gray'">
        <font face="Arial" size="2">
        <a href="ThisUrl.htm">Link to This</a></font></div>
        </td>
        <td width="85%" height="19"><font face="Arial" size="2" color="#00FFFF">
        Paragraph of text for &quot;Link to This&quot;, changes from color cyan to color 
        yellow if mouse moves over button.</font></td>
      </tr>
      <tr>
        <td width="15%" height="19">
        <div class="btn gray" onmouseover="this.className='btn red'" onmouseout="this.className='btn gray'">
        <font face="Arial" size="2">
        <a href="ThatUrl.htm">Link to That</a></font></div>
        </td>
        <td width="85%" height="19"><font face="Arial" size="2" color="#00FFFF">
        Paragraph of text for &quot;Link to That&quot;, changes from color cyan to color 
        yellow if mouse moves over button.</font></td>
      </tr>
      <tr>
        <td width="15%" height="19">
        <div class="btn gray" onmouseover="this.className='btn red'" onmouseout="this.className='btn gray'">
        <font face="Arial" size="2">
        <a href="OtherUrl.htm">Link to Other</a></font></div>
        </td>
        <td width="85%" height="19"><font face="Arial" size="2" color="#00FFFF">
        Paragraph of text for &quot;Link to Other&quot;, changes from color cyan to color 
        yellow if mouse moves over button.</font></td>
      </tr>
    </table>
    </body>
    </html>
    Last edited by Terry Cadd; 11-07-2006 at 03:00 AM. Reason: Added code tag.

  • #5
    Regular Coder
    Join Date
    May 2005
    Posts
    142
    Thanks
    0
    Thanked 0 Times in 0 Posts
    style="text-align:center" for each <TD> that contains the buttons.

    personally I would use this in the head (or external .css)
    Code:
    <style "type=text/css">td.btn_lnk{text-align:center}</style>
    then use this for each button's cell.
    Code:
    <td class="btn_lnk">
    Also: try to use a div with style="float:left;text-align:center" to contain your button links instead of tables.

    Despite my div suggestion, here's your your "test" code with highlighted paragraphs.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>OnMouseParagraphs</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="txt/javascript">
    <script type="text/javascript">
    function setCol(id,col){
    	document.getElementById(id).style.color=col;
    }
    </script>
    <style type="text/css">
    .gray{
    	background: url('GreyBtn105x20.gif') no-repeat left top;
    }
    .red{
    	background: url('RedBtn105x20.gif') no-repeat left top;
    }
    .btn{
    	width:105px;
    	height:20px;
    	color:#FFFFFF;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	text-decoration: none;
    	text-align:center;
    }
    .btn a{
    line-height:20px;/* this value should be the same as the div's height to keep text on the middle*/
    }
    .btn a:visited{
    	color:#FFFFFF;
    	text-decoration: none;
    }
    .btn a:link{
    	color:#FFFFFF;
    	text-decoration: none;
    }
    </style>
    </head>
    <body bgcolor="#000080">
    <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" height="73">
      <tr>
        <td width="15%" height="16">
        <p align="center"><b><font face="Arial" size="2" color="#FF0000">Title of This Column</font></b></td>
        <td width="85%" height="16">
        <p align="center"><b><font face="Arial" size="2" color="#FF0000">Title of This Other Column</font></b></td>
      </tr>
      <tr>
        <td width="15%" height="19">
        <div class="btn gray" onmouseover="this.className='btn red';setCol('p1','#ffff00')" onmouseout="this.className='btn gray';setCol('p1','#00ffff');">
        <font face="Arial" size="2">
        <a href="ThisUrl.htm">Link to This</a></font></div>
        </td>
        <td width="85%" height="19"><font id='p1' face="Arial" size="2" color="#00FFFF">
        Paragraph of text for &quot;Link to This&quot;, changes from color cyan to color 
        yellow if mouse moves over button.</font></td>
      </tr>
      <tr>
        <td width="15%" height="19">
        <div class="btn gray" onmouseover="this.className='btn red';setCol('p2','#ffff00')" onmouseout="this.className='btn gray';setCol('p2','#00ffff')">
        <font face="Arial" size="2">
        <a href="ThatUrl.htm">Link to That</a></font></div>
        </td>
        <td width="85%" height="19"><font id='p2' face="Arial" size="2" color="#00FFFF">
        Paragraph of text for &quot;Link to That&quot;, changes from color cyan to color 
        yellow if mouse moves over button.</font></td>
      </tr>
      <tr>
        <td width="15%" height="19">
        <div class="btn gray" onmouseover="this.className='btn red';setCol('p3','#ffff00')" onmouseout="this.className='btn gray';setCol('p3','#00ffff')">
        <font face="Arial" size="2">
        <a href="OtherUrl.htm">Link to Other</a></font></div>
        </td>
        <td width="85%" height="19"><font id='p3' face="Arial" size="2" color="#00FFFF">
        Paragraph of text for &quot;Link to Other&quot;, changes from color cyan to color 
        yellow if mouse moves over button.</font></td>
      </tr>
    </table>
    </body>
    </html>
    Last edited by VortexCortex; 11-07-2006 at 04:20 AM. Reason: Added highlighted paragraphs.

  • #6
    New Coder
    Join Date
    Oct 2006
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    I addded your suggestions above your code tag and it works great. I did not understand the third suggestion about: "Also: try to use a div with style="float:left;text-align:center" to contain your button links instead of tables.". I am new to web design and do not know all the best methods.
    Thank you very much for your help, and for your time looking in to my code.
    Terry


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>OnMouseParagraphs</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="txt/javascript">
    <script type="text/javascript">
    function setCol(id,col){
    	document.getElementById(id).style.color=col;
    }
    </script>
    <style type="text/css">
    .gray{
    	background: url('GreyBtn105x20.gif') no-repeat left top;
    }
    .red{
    	background: url('RedBtn105x20.gif') no-repeat left top;
    }
    .btn{
    	width:105px;
    	height:20px;
    	color:#FFFFFF;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	text-decoration: none;
    	text-align:center;
    }
    .btn a{
    line-height:20px;/* this value should be the same as the div's height to keep text on the middle*/
    }
    .btn a:visited{
    	color:#FFFFFF;
    	text-decoration: none;
    }
    .btn a:link{
    	color:#FFFFFF;
    	text-decoration: none;
    }
    </style>
    <style "type=text/css">td.btn_lnk{text-align:center}</style>
    </head>
    <body bgcolor="#000080">
    <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" height="73">
      <tr>
        <td width="15%" height="16">
        <p align="center"><b><font face="Arial" size="2" color="#FF0000">Title of This Column</font></b></td>
        <td width="85%" height="16">
        <p align="center"><b><font face="Arial" size="2" color="#FF0000">Title of This Other Column</font></b></td>
      </tr>
      <tr>
        <td width="15%" height="19" class="btn_lnk">
        <div class="btn gray" onmouseover="this.className='btn red';setCol('p1','#ffff00')" onmouseout="this.className='btn gray';setCol('p1','#00ffff');">
        <font face="Arial" size="2">
        <a href="ThisUrl.htm">Link to This</a></font></div>
        </td>
        <td width="85%" height="19"><font id='p1' face="Arial" size="2" color="#00FFFF">
        Paragraph of text for &quot;Link to This&quot;, changes from color cyan to color 
        yellow if mouse moves over button.</font></td>
      </tr>
      <tr>
        <td width="15%" height="19" class="btn_lnk">
        <div class="btn gray" onmouseover="this.className='btn red';setCol('p2','#ffff00')" onmouseout="this.className='btn gray';setCol('p2','#00ffff')">
        <font face="Arial" size="2">
        <a href="ThatUrl.htm">Link to That</a></font></div>
        </td>
        <td width="85%" height="19"><font id='p2' face="Arial" size="2" color="#00FFFF">
        Paragraph of text for &quot;Link to That&quot;, changes from color cyan to color 
        yellow if mouse moves over button.</font></td>
      </tr>
      <tr>
        <td width="15%" height="19" class="btn_lnk">
        <div class="btn gray" onmouseover="this.className='btn red';setCol('p3','#ffff00')" onmouseout="this.className='btn gray';setCol('p3','#00ffff')">
        <font face="Arial" size="2">
        <a href="OtherUrl.htm">Link to Other</a></font></div>
        </td>
        <td width="85%" height="19"><font id='p3' face="Arial" size="2" color="#00FFFF">
        Paragraph of text for &quot;Link to Other&quot;, changes from color cyan to color 
        yellow if mouse moves over button.</font></td>
      </tr>
    </table>
    </body>
    </html>


  •  

    Posting Permissions

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