How to do rollover with dynamic text?

JOSEPHINE ALVAREZ

I have this code that I want to use to do a rollover. However, because the
company I am doing it for is continually changing the text, I want to be
able to use dynamic text to change the text on the fly, and still have the
rollover work. I have taken the text off of the buttons, but cannot figure
out how to do it with dynamic text using javascript and html.

For example, in the columns of this row, I want to put "About
Us","Warranty","Insurance","Specials","Tools", and "Tips" respectively. I
can change the primary image to be the background of the cell, but then how
do I change the image for the rollover? If I leave the rollover as it is,
how do I place the dynamic text over the image? Is there a way in
Javascript to write on the canvas of the image? I have no idea, and any
help would greatly be appreciated! Thanks!

<TR>
<TD COLSPAN=5>
<a href="about.html" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Home_01','','images/home_01_over.jpg',1)"><img
src="images/Home_01.jpg" alt="ABOUT US" name="Home_01" width="90"
height="30" border="0"></a>
</TD>
<TD COLSPAN=3>
<a href="warranty.html" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Home_02','','images/home_02_over.jpg',1)"><img
src="images/Home_02.jpg" alt="WARRANTY" name="Home_02" width="90"
height="30" border="0"></a>
</TD>
<TD COLSPAN=4>
<a href="#" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Home_03','','images/home_03_over.jpg',1)"><img
src="images/Home_03.jpg" alt="INSURANCE" name="Home_03" width="90"
height="30" border="0"></a>
</TD>
<TD COLSPAN=3>
<a href="#" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Home_04','','images/home_04_over.jpg',1)"><img
src="images/Home_04.jpg" alt="THE A-TEAM" name="Home_04" width="90"
height="30" border="0"></a>
</TD>
<TD COLSPAN=4>
<a href="#" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Home_05','','images/home_05_over.jpg',1)"><img
src="images/Home_05.jpg" alt="BUYER TOOLS" name="Home_05" width="90"
height="30" border="0"></a>
</TD>
<TD COLSPAN=4>
<a href="#" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Home_06','','images/home_06_over.jpg',1)"><img
src="images/Home_06.jpg" alt="BUYING TIPS" name="Home_06" width="90"
height="30" border="0"></a>
</TD>

Sep 23 '05 #1

Follow Post Reply

2564

ijsaunders

I would recommend taking off the text from the images, and rendering
them all as css rollovers.

I recently did this at http://www.pavauk.org.uk//local/local.php (the
menu at the bottom of the page is database driven).

If you need further help with this let me know.

Cheers

Ian

www.boan-design.co.uk

Sep 23 '05 #2

RobG

JOSEPHINE ALVAREZ wrote:

I have this code that I want to use to do a rollover. However, because the
company I am doing it for is continually changing the text, I want to be
able to use dynamic text to change the text on the fly, and still have the
rollover work. I have taken the text off of the buttons, but cannot figure
out how to do it with dynamic text using javascript and html.

For example, in the columns of this row, I want to put "About
Us","Warranty","Insurance","Specials","Tools", and "Tips" respectively. I
can change the primary image to be the background of the cell, but then how
do I change the image for the rollover? If I leave the rollover as it is,
how do I place the dynamic text over the image? Is there a way in
Javascript to write on the canvas of the image? I have no idea, and any
help would greatly be appreciated! Thanks!

Don't use JavaScript at all (especially that dreadful old MM_ stuff),
use CSS.

See if this does the job:

<html><head><title>Link play</title>
<style type="text/css">

A:link {
text-decoration: none;
text-align: center;
line-height: 2em;
display: block;
width: 90px;
height: 30px;
border: 2px solid green;
background-image: url('images/home_01.jpg');
}

A:visited {
text-decoration: none
}

A:active {
text-decoration: none
}

A:hover {
text-decoration: underline;
color: red;
background-image: url('images/home_01_over.jpg');
}

</style>
</head>
<body>

<a href="#">Link text</a>

</body></html>
If you need any help with the CSS, post in
comp.infosystems.www.authoring.stylesheets

[...]
--
Rob

Sep 23 '05 #3

ijsaunders

I agree, but look into a css rollover that changes position, (and put
both over and out images into one), this way you will require no image
preloading.

Cheers

Ian

www.boan-design.co.uk

Sep 23 '05 #4

How to do rollover with dynamic text?

This discussion thread is closed

Similar topics