Hello all, I am helping create a website. Over a particular Image I have, I want it to say the name of the link, ie Home. While I got my cool flash things working where the image changes colors on mouseover, I can not get the text of the link to appear on the image itself, it always appears around the image but touching it. Any idea how to get the text onto the image? Thanks.
Roebuc 0 Junior Poster
hielo 65 Veteran Poster
Can you post some code?
Not sure if a background image on the link will fix your problem OR one of a "title" or "alt" attributes on one of the elements you are doing. Hard to troubleshoot without knowing what you are looking at.
Roebuc 0 Junior Poster
Yeah, sorry it took me so long. Here are the three lines that make up the area I want the links.
<td style="height:44px">
<a href="index-1.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('r1','','images/l1-1.gif',1)"><img alt="" src="images/l1.gif" name="r1"></a><img alt="" src="images/l-l.gif" ><a href="index-2.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('r2','','images/l2-2.gif',1)"><img alt="" src="images/l2.gif" name="r2"></a><img alt="" src="images/l-l.gif" ><a href="index-3.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('r3','','images/l3-3.gif',1)"><img alt="" src="images/l3.gif" name="r3"></a><img alt="" src="images/l-l.gif" ><a href="index-4.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('r4','','images/l4-4.gif',1)"><img alt="" src="images/l4.gif" name="r4"></a><img alt="" src="images/l-l.gif" ><a href="index-5.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('r5','','images/l5-5.gif',1)"><img alt="" src="images/l5.gif" name="r5"></a><br>
</td>
I know I have done it before, just for the life of me I can't remember how. I do not want the text itself to be just part of the image, I want it to be a layer over the image. Anyhelp would be appreciated.
Tropp 0 Light Poster
The text you insert in the alt tag wil show in IE (fairly sure it doesn't work in firefox)
eg: <img alt="text goes here"
Is that what you are wanting ?
Roebuc 0 Junior Poster
One other thing I shouldl have said, I am not looking for the alt"" property, I haven't typed it in, but thats not what I am looking for on the mouse over. I was thinking value"" would be the trick, but that has not worked either. When I typed in in between the <a.....></a>, it just comes out beside the background image. The person I am doing this for just bought the template and it was created on dreamweaver, I do not have dreamweaver, I am using coffee cup. I might be able to fix it if I could convert the .swf file, but I can not find a way to open it without dreamweaver. This is the only problem I have run into, last part and I am done ;)
Tropp 0 Light Poster
Possibly put the text in a cell with the image as the background .. that would work.
Roebuc 0 Junior Poster
Well, I thought about that, I haven't tried it though because I thought it might take away the mouse over effect, ie when you put your mouse over it the color changes. Would that affect the mouse over effect at all? I am not near my computer I have done this on, so I can not try it and see right now.
hielo 65 Veteran Poster
I think you are looking for the title attribute:
<a href="" title="Look at me"><img src=""/></a>
or:
<a href=""><img src="" title="Look at me"/></a>
It can be used on the <a> and/or the <img> tags.
Roebuc 0 Junior Poster
Thank you for the help, I tried it and that still did not work. When I hold over my mouse, I see the alt come up that says home. What I am trying to do is have the text Home, appear on top of the image that is the link, regardless of the mouse being over it: Here is what I have after taking Tropp's advice, which I think has me going in the right direction, here is the code now:
<table class="LinkBar" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style=" backgroundimage: url(images/l1.gif); width:25%;" onMouseOut="MM_swapImgRestore()" onMouseover="MM_swapimage('images/l1.gif','','images/l1-1.gif','1')"><a href="index-1.html"><font size="3"><strong>Home</strong></font></a></td>
<td align="center" style="width:1px"><img src="images/l-l.gif"></td>
<td align="center" style=" backgroundimage: url(images/l2.gif); width:25%;" onMouseOut="MM_swapImgRestore()" onMouseover="MM_swapimage('images/l2.gif','','images/l2-2.gif','1')"><a href="index-1.html"><font size="3"><strong>Home</strong></font></a></td>
<td align="center" style="width:1px"><img src="images/l-l.gif"></td>
<td align="center" style=" backgroundimage: url(images/l3.gif); width:25%;" onMouseOut="MM_swapImgRestore()" onMouseover="MM_swapimage('images/l3.gif','','images/l3-3.gif','1')"><a href="index-1.html"><font size="3"><strong>Home</strong></font></a></td>
<td align="center" style="width:1px"><img src="images/l-l.gif"></td>
<td align="center" style=" backgroundimage: url(images/l4.gif); width:25%;" onMouseOut="MM_swapImgRestore()" onMouseover="MM_swapimage('images/l4.gif','','images/l4-4.gif','1')"><a href="index-1.html"><font size="3"><strong>Home</strong></font></a></td>
</tr>
</table>
(I apologize for the spacing issues, I am not near my computer with my IDE, so I am having to use notepad.) Now, I have the images and text appearing as hoped and needed. The only issue I have now is the swap image command is not working and valign does not work. I dont have it typed into this code I have copied and pasted but I can't get the text to line up vertivally centered for some reason. Thanks again for all ya'll's help.
Roebuc 0 Junior Poster
haha, I figured it out, FYI, I should have had this in the onMouseover cmd:
onMouseover="this.style.background='url(l1-1.gif)'"
...and so on for every td, thanks for everyones help on this.
Roebuc 0 Junior Poster
One more thing to add in case anyone ever refferences this thread later, I am not sure why valign would not work, my guess is it had something to do with the image in the cell. But to make the whole cell a link, swap images on mouse over, and have the text vertically centered(or appear to be) as well as horz. centered I used the folloing code line on all links:
<a href="index-1.html"><td align="center" style=" backgroundimage: url(images/l1.gif); width:25%;" onMouseOut=" this.style.background='url(images/l1.gif)'" onMouseover="this.style.background='url(images/l1-1.gif)'"><div style="margin-top:10px"><font size="3"><strong>Home</strong></font></div></td></a>
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.