Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: mouseover help?

  1. #1
    Junior Member
    Join Date
    Feb 2005
    Posts
    5

    Default mouseover help?

    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

  2. #2
    Senior Member jalal's Avatar
    Join Date
    May 2003
    Location
    Germany
    Posts
    1,377

    Default

    Just take a look at the source for the page and base your page on that.

    HTH

  3. #3
    Moderator wildjokerdesign's Avatar
    Join Date
    Jun 2003
    Location
    Kansas City Mo
    Posts
    5,721

    Default

    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.
    Shawn
    Please remember your charity of choice: http://www.redcross.org

    Handy Links: wildjokerdesign.net | Plain Text Editors: EditPlus | Crimson

  4. #4

    Default

    There is a simple way.
    Include the attribute "title" in your link.

    For instance:
    Code:
    <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.

  5. #5
    Moderator wildjokerdesign's Avatar
    Join Date
    Jun 2003
    Location
    Kansas City Mo
    Posts
    5,721

    Default

    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.
    Shawn
    Please remember your charity of choice: http://www.redcross.org

    Handy Links: wildjokerdesign.net | Plain Text Editors: EditPlus | Crimson

  6. #6
    Junior Member
    Join Date
    Feb 2005
    Posts
    5

    Default

    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

  7. #7
    Moderator wildjokerdesign's Avatar
    Join Date
    Jun 2003
    Location
    Kansas City Mo
    Posts
    5,721

    Default

    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.
    Shawn
    Please remember your charity of choice: http://www.redcross.org

    Handy Links: wildjokerdesign.net | Plain Text Editors: EditPlus | Crimson

  8. #8

    Default

    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

    Code:
    <!-- 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.


    Code:
    <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

  9. #9
    Junior Member
    Join Date
    Feb 2005
    Posts
    5

    Default

    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

  10. #10
    Junior Member
    Join Date
    Feb 2005
    Posts
    5

    Default

    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •