homepage Welcome to WebmasterWorld Guest from 54.243.13.30
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Accredited PayPal World Seller

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
html dynamic pop up , how to create.
fixxi




msg:4521696
 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




msg:4521697
 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:4521700
 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




msg:4521717
 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




msg:4521755
 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




msg:4521851
 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




msg:4521864
 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




msg:4521994
 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:4521997
 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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved