By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,788 Members | 1,115 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,788 IT Pros & Developers. It's quick & easy.

Can I have larger text size for the ALT text in an image map?

tpgames
100+
P: 785
I want to use an image map, but I want the text that pops up when the mouse mouse overs the link to be larger. However, in an image map, that text is what's in the ALT tag, and doesn't appear to care what the text size says in the CSS. Is there a cure for this? (Outside of a separate text only area of links for navigation, I'm already planning on doing this.)
Thanks!
(ps. I did try to research this, and no one mentions text size, just all the info I already knew.)
Feb 5 '07 #1
Share this Question
Share on Google+
10 Replies


tpgames
100+
P: 785
By the way, I am using a title attribute as well, so that most browsers will show text on a mouse over on the image map.
[HTML]alt="A - L ARCADE Games!" title="A - L Arcade Games!" [/HTML]
I'd like both the title info and the alt info to show in larger text, if its possible. Thanks!
Feb 5 '07 #2

tpgames
100+
P: 785
After 4 days, may I assume that the answer is, we've not heard of a work around to get the text larger?
Or, is it rather there's a tag in the CSS sheet that is in the CSS classes file that I missed?
I've not found anything yet. LOL I've not even found where the alt tag and title tag have a CSS equivalent, or has the alert button curse. (The curse is that alert buttons can't be changed to display larger text, just because you want it to.) Of course, the work around to that, is a pop-up window, disguising itself as an alert button. LOL
Seriously, I do believe that my google searching of the answer has been fruitless because I've got my search terms wrong. LOL :D
Feb 10 '07 #3

Expert 100+
P: 1,892
Sorry must have missed this post somehow. Are you willing to use Javascript? I've seen some work arounds with CSS that may work but they are browser particular. However, if your willing to do some Javascript you can make all kinds of things popup on a mouseover event.


Aric
Feb 10 '07 #4

drhowarddrfine
Expert 5K+
P: 7,435
Google for CSS Tooltips for better ways than using ALT.
Feb 10 '07 #5

tpgames
100+
P: 785
Sorry must have missed this post somehow. Are you willing to use Javascript? I've seen some work arounds with CSS that may work but they are browser particular. However, if your willing to do some Javascript you can make all kinds of things popup on a mouseover event.


Aric
I am willing to use Java Script. I'm trying to make my site Firefox friendly, as most of my games work well on firefox.

Concerning tooltips:
I'll see what google gives me. However, a java script work around might work better for my game I'm making that uses images maps. :)
Feb 11 '07 #6

tpgames
100+
P: 785
I found a page that has a JavaScript tooltip that I think will work. It won't have the browser compatibility issues that CSS tooltips might have. My site requires JS enabled anyhow, as its a gaming site so I'm not concerned with people who don't have JS.
The JavaScript Tooltip

On another note, I think I finally figure out the links form with Firefox. :lol:
Feb 11 '07 #7

P: 1
playing card game some can hep me?
Feb 11 '07 #8

tpgames
100+
P: 785
I found a javascript tool tip program, however is doesn't work inside of an image map tag.

The span tag inside of the image map tag doesn't work. So, using CSS would give me the same results.

[HTML]<span class="tip" onmouseover="tooltip('styling');" onmouseout="exit();"
AREA SHAPE="Rect" alt="ARCADE GAMES!" <span id="styling">"ARCADE GAMES!" </span>HREF="/gaming/2/arcadegamesnav.html" COORDS="156,473 215,500"> [/HTML]

The whole point is to have an image without text on it, that has text only when you mouse over it, and have this mouse over be within a specific part of the image, not the entire image.

imagemap1
Link to image map. I do have alternative links on the right. However, if I get this to work, I will use it on a game that will not have links on the right. It wouldn't be a game with exposed links.
Thanks!
Feb 11 '07 #9

tpgames
100+
P: 785
I found another code that looks like it will work. Here's the html part of it.
[HTML]<map name="image-map">
<area shape="rect" coords="15,15,85,85" href="javascript:alert('1')"
onMouseover="show('myLayer1')" onMouseout="hide('myLayer1')">

<area shape="rect" coords="93,15,110,85" href="javascript:alert('2')"
onMouseover="show('myLayer2')" onMouseout="hide('myLayer2')">
</map>

<img name="boxImage" src="white.gif" border=0 width=200 height=100 usemap="#image-map">

<div id="myLayer1" class="myStyle">
<table bgcolor="#ffffcc"><tr><td>
This text is hidden from view.
<br>
It is revealed when the mouse
<br>
moves over the first hot spot
</td></tr></table>
</div>

<div id="myLayer2" class="myStyle">
<table bgcolor="#ffffcc"><tr><td>
This text is also hidden from view until it is
revealed when the mouse moves over the 2nd hot spot
</td></tr></table>
</div>[/HTML]

The JavaScript part is here:
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript" language="JavaScript"><!--
  2. function show(object) {
  3.     if (document.layers && document.layers[object] != null)
  4.         document.layers[object].visibility = 'visible';
  5.     else if (document.all)
  6.         document.all[object].style.visibility = 'visible';
  7. }
  8. function hide(object) {
  9.     if (document.layers && document.layers[object] != null)
  10.         document.layers[object].visibility = 'hidden';
  11.     else if (document.all)
  12.         document.all[object].style.visibility = 'hidden';
  13. }
  14. //--></script>
  15.  
  16. <style type="text/css"><!--
  17. .myStyle {
  18.     position: absolute;
  19.     visibility: hidden;
  20. }
  21. //--></style>
Knowing to search for tooltip really helped. New vocab word for me. :)
Feb 11 '07 #10

tpgames
100+
P: 785
playing card game some can hep me?
You'll be better off starting a new thread, and asking a specific question or something. Posting your source code in brackets would help too. Use the '#' sign above the box you post in, and copy and paste your code between the brackets that come up. Also, there is lots of good card game source code on the web, free for the taking if your search terms are correct.

Try: JavaScript source code "card games"
Or try: JavaScript "source code" solitaire games
Often times, looking at the source code of another game will tell you where you went wrong with yours, depending upon what level of understanding of code you have. I have a limited understanding yet. LOL Hope this helps.
Feb 11 '07 #11

Post your reply

Sign in to post your reply or Sign up for a free account.