PDA

View Full Version : mouseover help?



amycap
02-08-2005, 08:28 PM
Hello everyone,

I am new to web development and new to this site. I was wondering if anyone can tell me how to do this:

When you go move your cursors over the link I want text to pop up somwhere under the links. I believe I need javascript to do this but just not sure what this is called and how to do it.

I have found a page that has this done. here is the link: http://www.suzannesbridal.com/

This will better explain what i want.

Thanks in advance!
Amy

jalal
02-09-2005, 02:01 AM
Just take a look at the source for the page and base your page on that.

HTH

wildjokerdesign
02-09-2005, 07:42 AM
They are using javascript to do this on the page you mentioned. Like Jalal mentioned if you look at the source you can see how they did it. It is pretty simple straight forward scripting. If you are not familiar with javascript you might want to search with terms like - image rollover, image swap, image mouseover effects... if you add javascript and in with those you might get some other ways of doing this.

sunzon
02-09-2005, 01:41 PM
There is a simple way.
Include the attribute "title" in your link.

For instance:


<a href="http://codeworks.gnomedia.com/westhost-introduction" title="See Westhost Tips and Tricks, lots of detailed methods to configure your website at WestHost">Gnomedia</a>

<a href="http://www.wildjokerdesign.com/board" title="See many helpful posts on how problems are solved in configuring your website to work at WestHost">WildJokerDesign</a>


Moving the mouse over a link with the "title" attribute will show a small window with the "title" text.

wildjokerdesign
02-09-2005, 05:21 PM
Good one sunzon! I had thought of mentioning that but the one problem is that the message does not show for very long. You also don't have control over where the message shows it simply shows next to the cursor. It is pretty nifty I think for short messages it is great and use it quite a bit on sites. There are actually javascripts that mimick that but allow you to place the text where you want it and to display. Hard to get it to be cross-browser compatiable.

amycap
02-09-2005, 08:14 PM
Thanks everyone for your reply! I not really familier with javascript. Can I ask is the links on that page, images for say made in adobe? I made my links already use css. do I have to make them images instead? or can I use what I already have to do this. I am sorry but I am just a bit confused on there source because it states img.

I will, tonight look up java to see how to do this.

Thanks
sorry I am newb

Amy

wildjokerdesign
02-09-2005, 10:13 PM
Hi Amy,
Yes the links on that page are images. Do you have text links? It is possible to do something similiar with text. It would be hard to give you an exact without knowing what you where doing for sure. I am pretty pushed for time this week but if I can fit it in I'll try to gather some examples that may help. They are still going to use javascript (java and javascript are two different things) so if you can do a bit a reading up on it then it is going to help.

sunzon
02-10-2005, 03:43 AM
As WildJokerDesign said, do a search on the internet for "free javascripts", you will find many useful scripts with examples.

Since the ever helpful WildJokerDesign is busy this week, let me chip in to get you on your way, here is a simple one that I think will do what you want (note it is customary to give credit to the source of the script in a comment line).

Place this code between <head> and </head> on your webpage



<!-- START SCRIPT -->
<style type="text/css">
.popperlink { POSITION: absolute; VISIBILITY: hidden }
</style>

<DIV class=popperlink id=topdecklink></DIV>

<SCRIPT language="JavaScript">

/*
SCRIPT SOURCED FROM L'EDITEUR JAVASCRIPT
http://www.editeurjavascript.com
*/
domok = document.getElementById;
if (domok)
{
skn = document.getElementById("topdecklink").style;
if(navigator.appName.substring(0,3) == "Net")
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = get_mouse;
}

function poplink(msg)
{

var content ="<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR=#000000><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=2 CELLSPACING=1><TR><TD BGCOLOR=#000000><FONT COLOR=#FFFFFF SIZE=2 face='Verdana'><CENTER>"+msg+"</CENTER></TD></TR></TABLE></TD></TR></TABLE>";

if (domok)
{
document.getElementById("topdecklink").innerHTML = content;
skn.visibility = "visible";
}
}

function get_mouse(e)
{
var x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;
var y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
skn.left = x - 60;
skn.top = y+20;
}

function killlink()
{
if (domok)
skn.visibility = "hidden";
}

</SCRIPT>
<!-- END SCRIPT -->


Note that you can change the presentation of the window that will appear.
At the above line "var content" you can edit that presentation (colors, padding and so on).


Now you put your window text in the "poplink" parameter, for either text links or an image as shown in below examples.




<A onMouseOver="poplink('See many helpful posts on how problems are solved in configuring your website to work at WestHost');" onmouseout="killlink()" href="http://www.wildjokerdesign.com/board">WildJokerDesign</a>
<br><br>
<IMG SRC="http://www.wildjokerdesign.com/image/newlogo.gif" BORDER="0" onMouseOver="poplink('See many helpful posts on how problems are solved in configuring your website to work at WestHost');" onmouseout="killlink()">



good luck

amycap
02-10-2005, 07:28 PM
Hello yesterday I found this script which I understand what do you guys think? I read somewhere though the <div> tag is not accepted in the newer version of html what can i use instead?

thanks so much, Amy




<script language="JavaScript">

<!--
function change(html){
description.innerHTML=html
}
//-->
</script>

PASTE THIS SCRIPT INTO YOUR BODY TAG

Just change the url and hyperlink text as if it was just another ordinary hyperlink. Then also change "This is still
my favourite search engine." to the test you want to appear as your description, html tags are supported


<a href="http://www.altavista.com" onmouseover="javascript:change('This is still my favourite search engine.')
" onmouseout="javascript:change('')">Altavista</a>

Then, finally, place this where you like your description to appear.
Notice that this layer can change in size when you enter different descriptions. A good tip is to set an appropiate height
and width for the div tag.

<div id="description"></div>


THIS SCRIPT BROUGHT TO YOU BY JAVAFILE.COM -
http://www.javafile.com

amycap
02-10-2005, 08:36 PM
sorry I forgot to ask how do I change a font size for this part: ('Find out about us and what we do!')

I want that part to be to be a little bigger with a different font then the actually link not sure how to do this I figured out how to change the color but I can't seem to change the font or font size.



<a href="aboutus.html" onmouseover="javascript:change ('Find out about us and what we do!')


Thanks so much!
Amy

wildjokerdesign
02-10-2005, 10:38 PM
Well sunzon's example takes care of your font problem and is a little stronger then the one you found. (thanks sunzon)

One nice thing about it is that it shows the message next to the where the link is that they mouse over if I am reading it right... bit tired here and foggy.

You should be ok with a <div> tag that is what sunzon has used. You could use your script and control the look of it with CSS.

<style type="text/css">
.dlook { font-size: 14px; }
</style>
You would then set the class for the <div>

<div id="description" class="dlook"></div>

The CSS goes in the head of your page normally.

amycap
02-10-2005, 11:15 PM
Hi wild joker

Thanks for your reply thank you thank you :mrgreen: I could not figure the font thing out. anyways I look at sunzons example I would love to use it but I am just not sure what it all means, although it does look like it would be better then what I am using. Thanks very much everyone for your help!!!

Thanks again!
Amy

sunzon
02-11-2005, 02:11 AM
Hello Amy,

Sorry, my fault, I apologise for giving the impression things are difficult that in fact are not!

The script I gave should be placed after the <body> tag, not between <head> and </head>.
I made 2 demo pages for you, in order to plead for forgiveness :oops:.

See
http://sunzon.com/amycap.html
http://sunzon.com/amycap2.html

You will note I changed that "var content" line for the second demo page, just to show you how you can adapt presentation of the window.

This script is really quite simple but quite effective in allowing you to configure it as you want.

Sorry again for the confusion.
I will remove these demo pages once you confirm receipt.

Tom Howard
02-11-2005, 12:10 PM
Looking at the original site, I think what you want is a "double rollover" effect. There are javascript ways to do this, but I think Eric Meyer's pure CSS (http://www.meyerweb.com/eric/css/edge/popups/demo.html) version is worty of note.