Solved

mouseover popup hints

Posted on 1998-07-17
12
852 Views
Last Modified: 2012-05-04
How do you create an information/description popup box for a mouseover on an image/link?  Are ther browsers it won't work in?
0
Comment
Question by:yfcbdn
  • 5
  • 4
  • 2
  • +1
12 Comments
 
LVL 8

Expert Comment

by:jbirk
ID: 1266703
well you could do:

onMouseOver="alert('info description here');" within the <A HREF=""> tag
or you could do: onMouseOver="window.open('file.html','info')" also within the anchor.
As far as I know this will be supported by all javascript browsers (NN 2+, IE 3+), but I suggest against it because it gets really annoying when trying to navigate a site.

If you mean those little description text things that show sometimes when you move a mouse over an image, that's done simply using the alt property of the img tag.  That however will only work on 4.0 browsers.
It would look like: <IMG src="img.gif" alt="info description here">
0
 

Author Comment

by:yfcbdn
ID: 1266704
I am actually looking for the effect Microsoft does on their search page (I am using IE 4)  I am wondering if their script is IE 4 only, or if it can be ported for other browsers, and then how they do it without the "greyed scroll bar and border" that you get if you define a text box in a form.
0
 
LVL 8

Expert Comment

by:jbirk
ID: 1266705
I am sorry, I don't understand what you mean.  I went to their site with IE 4, and saw nothing other than the usual alt tags for images.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 1266706
They either use
DHTML (Cascading style sheets and DIVs)
or
window.open('message.htm','msgwin','height=100,width=100,scrollbars=no')
 it is scroll=no or scrollbars=no, cannot remember off the top of my head

MSIE 4 supports the TITLE attribut on most elements
like <A HREF="...." TITLE="This shows on mouse overs as a tooltip">Click me</A>

I suspect the last is what you have seen

Hope this helps,

Michel
0
 

Author Comment

by:yfcbdn
ID: 1266707
The MS site I am referring to is their search setup.  The mouseover info boxes contain images and formatted text.  I am unsure whether they are using DHTML or a java script (I am still a novice eh).  Thanks for your guys input.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 1266708
Hmmm, I wonder what it takes to get an answer accepted here...

I cannot test it myself snce I do not have MSIE here, but to me it sounds like DHTML divs, window.open or perhaps an IFRAME, but let us know hwat it takes.

Michel
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:yfcbdn
ID: 1266709
Okay - here's the site I referred to earlier, but I have only tried it with MSIE 4 .... http://home.microsoft.com/search/lobby/SearchSetup.htm

Mouseover the search engine links and the info box, in the defined spot, gives an image and information on the link.

Sorry to keep bothering you on this question.  I never meant for it to be a production as I thot it might be more straightforward.
0
 
LVL 8

Expert Comment

by:jbirk
ID: 1266710
That's dhtml...  very browser specific.  That sight doesn't even come close to working on netscape...
0
 
LVL 2

Expert Comment

by:threshold
ID: 1266711
Here is My HTML without Javascript...

<a href="Alt.htm"><img src="../images/amconfus.jpg" width="195" height="419" alt="Here You are..."></a>

Is it what you want? I try it in NS4.x and IE 3.x and IE 4.x, the Popup box works well.

I know, It can be used in IMAGE only.

If you want the popup box display with Text/URL, there is no simple way in HTML/Javascript but replacing the Text by a Image.

If your text/url is generated by CGI dynamically. You will write many code vary hard...

Of cause, If you want your popup box contains a image, It's not easy, but you can try onMouseOver/onMouseOut...
I think you will meet the 'focus' problem.



0
 
LVL 8

Expert Comment

by:jbirk
ID: 1266712
threshold, that solution was already suggested and rejected.  Did you read the previous answers/comments?

What he wants is only available with DHTML...
0
 

Author Comment

by:yfcbdn
ID: 1266713
now what - jbirk and mplungjan answered my question.  I guess one of you has to post some sort of answer so I can allocate the points.  Thanks for your input!

0
 
LVL 8

Accepted Solution

by:
jbirk earned 50 total points
ID: 1266714
No problem!  I think if you ask EE support, they will give you some extra points in order to give points to both of us.  I answered this, one, so if they give you extra points, post another question 'for mplungjan' to give him his points...  Is there any other way?

Thanks!
Josh
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now