homepage Welcome to WebmasterWorld Guest from 50.16.112.199
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
html dynamic pop up , how to create.
fixxi



 
Msg#: 4521694 posted 11:53 pm on Nov 22, 2012 (gmt 0)

Hi All,

how do i create in html ( or is it javascript / ajax > ) a dynamic description that shows when an html element is hovered with the mouse ?

For example, I have a link called "Link to the mooon" , I want as soon as a visitor hover the mouse over the link, a small description box to appear with description like " Click here to go to the moon. Thank you"

I don't want the standard HTML alt descriptions.. these appear to slowly and are to small.

 

lucy24

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4521694 posted 12:21 am on Nov 23, 2012 (gmt 0)

In javascript you start with "onhover" to call a function. (There are other ways but that's the most straightforward.)

In raw html you can do it with image maps combined with a title attribute. Or did you mean "title" when you said "alt"? You'd almost have to, since alts don't simply appear.

It might be easier if you explained what you're really after. MMN without the M? "Click here" in case the user doesn't know how to operate a link?

If you're looking for exact cut-and-paste code you have come to the wrong forum :(

fixxi



 
Msg#: 4521694 posted 12:39 am on Nov 23, 2012 (gmt 0)

apparently what i need is [onehackoranother.com...]
One question, How many browsers backwards support jquery ? also is jquery enabled by default in the browsers like javascript ? I am just wondering how many people won't be able to see the jquery pop out because their browser would not support it.

tedster

WebmasterWorld Senior Member tedster us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4521694 posted 4:24 am on Nov 23, 2012 (gmt 0)

jquery IS a javascript library and it is kept quite up to day. As long as the pop-up plug-in you use continues to be updated if and when jquery updates require it, you should be fine.

lucy24

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4521694 posted 7:21 am on Nov 23, 2012 (gmt 0)

also is jquery enabled by default in the browsers like javascript

Well, there's your problem. What have you got for the users-- apparently including at least 95% of WebmasterWorld members-- who have scripting turned off?

The specific answer is "MSIE >= {some number}" where the exact number depends on the question.

birdbrain

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4521694 posted 11:02 am on Nov 23, 2012 (gmt 0)

Hi there fixxi,

have you considered CSS for this task?

Here is an example...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>simple css tooltip</title>

<style type="text/css">
#links {
padding:0;
margin:0;
list-style-type:none;
}
#links li {
clear:both;
}
.tooltip {
position:relative;
float:left;
padding:5px 10px;
font-size:1em;
color:#000;
text-decoration:underline;
}
.tooltip:hover {
color:#999;
}
.tooltip span {
position:absolute;
z-index:1;
display:none;
width:300px;
padding:10px;
top:0;
left:100%;
border:3px double #c96;
background-color:#fdb;
font-size:80%;
color:#630;
}
.tooltip:hover span {
display:block;
}
</style>

</head>
<body>

<ul id="links">

<li>
<a class="tooltip" href="http://www.gotothemoon.com/">Link to the Moon
<span>
Click here to go to the moon.<br>
Thank you
</span>
</a>
</li>

<li>
<a class="tooltip" href="http://www.lipsum.com/">Link to the Lorem ipsum
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
ultricies sollicitudin nisi, ut molestie felis adipiscing sit
amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae
faucibus felis. Vivamus at metus eget eros consequat fringilla.
Quisque magna magna, laoreet eu tempus sit amet, fringilla at
tellus. Praesent felis tortor, scelerisque vitae fringilla
non, porttitor et lacus. Ut ut sapien nec quam tincidunt
consectetur in nec lacus.
</span>
</a>
</li>

</ul>

</body>
</html>



birdbrain

g1smd

WebmasterWorld Senior Member g1smd us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4521694 posted 12:14 pm on Nov 23, 2012 (gmt 0)

It is never "alt" text that "pops up" (unless we're talking about old versions of IE, that is).

It is the title attribute text that pops up. Have you tried it?

lucy24

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4521694 posted 9:18 pm on Nov 23, 2012 (gmt 0)

I think when the OP said "alt" he meant "title". That is, the content may have been the alt content but it's the title function.

Yes, I remember when w3 had to explain prominently that the reason Firefox seemed to behave oddly w/r/t title and alt is that it was (then) the only browser doing what it was supposed to do :)

fixxi



 
Msg#: 4521694 posted 9:23 pm on Nov 23, 2012 (gmt 0)

Thank you for all suggestions , I am trying. Sorry for confusion, I guess I meant Title not alt.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved