469,906 Members | 2,196 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,906 developers. It's quick & easy.

How to do rollover with dynamic text?

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

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

5 posts views Thread by NONYA | last post: by
5 posts views Thread by jedbob | last post: by
2 posts views Thread by mix2plix | last post: by
1 post views Thread by Jim in Arizona | last post: by
1 post views Thread by Waqarahmed | last post: by
reply views Thread by Salome Sato | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.