How to do rollover with dynamic text?

JOSEPHINE ALVAREZ · Sep 23, 2005

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>

ijsaunders · Sep 23, 2005

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

RobG · Sep 23, 2005

JOSEPHINE said:
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

[...]

ijsaunders · Sep 23, 2005

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

Help with Visual Lightbox: Scripts	2	May 3, 2023
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one?	0	Jan 10, 2021
Having difficulty with the layout of these images / video for this web page	2	Jul 5, 2022
Sort by number of characters	1	Nov 2, 2023
Change to background image.	5	Dec 18, 2018
Help with my responsive home page	2	Dec 14, 2022
SendGrid email issue in responsive Gmail	1	Nov 4, 2021
Flip-Cards with Local Images	1	Mar 27, 2023

How to do rollover with dynamic text?

JOSEPHINE ALVAREZ

ijsaunders

RobG

ijsaunders

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads