...

View Full Version : onmouse roll over image buttons, need text label overlay



Terry Cadd
10-30-2006, 06:21 AM
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/Images/GreyBtn200x20.gif

http://web2.airmail.net/terrycad/Images/RedBtn200x20.gif


<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>

Kor
10-30-2006, 02:58 PM
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:


<!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>

Terry Cadd
10-30-2006, 06:37 PM
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 :thumbsup:

Terry Cadd
11-07-2006, 12:15 AM
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:


<!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>

VortexCortex
11-07-2006, 04:06 AM
style="text-align:center" for each <TD> that contains the buttons.

personally I would use this in the head (or external .css)

<style "type=text/css">td.btn_lnk{text-align:center}</style>

then use this for each button's cell.


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


<!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>

Terry Cadd
11-07-2006, 03:36 PM
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




<!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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum