Java/html Help

Discussion in 'Gaming' started by Darkmage, Feb 22, 2008.

  1. Darkmage

    Darkmage Senior Member

    Posts:
    715
    Likes Received:
    0
    Joined:
    Aug 27, 2005
    Location:
    Texas, U.S.
    http://meillureville.myminicity.com/

    At the url above, I notice there is a neat little feature that creates a box that follows the user's cursor whenever it is over one of those numbered rows in the bottom left.

    I've been working on a script to implement this into one of my pages. This is what I have so far (very basic):

    Code:
    <html>
    
    <head>
    <script type="text/javascript">
    function mouseOver()
    {
    document.jp1.src ="http://data.myminicity.com/img/flags/fr.gif";
    }
    function mouseOut()
    {
    document.jp1.src ="http://forums.facepunchstudios.com/logo-b.gif";
    }
    </script>
    </head>
    
    <body>
    [img]http://forums.facepunchstudios.com/logo-b.gif[/img]
    
    </body>
    </html>





    I need an example of how to do what they did so I can duplicate that effect on my own pages.

    Any help is appreciated and rewarded with +rep.
     
  2. r3m1x

    r3m1x Well-Known Member

    Posts:
    2,260
    Likes Received:
    0
    Joined:
    Jun 21, 2005
    Location:
    New York City
    I know of two ways. But there's an easier version written completely in HTML, but functions with the help of java.

    what you're trying to do it make a changing picture so:
    Code:
    [img]firstSource.jpg[/img]
    Although you may not see it, the onmouseover and onmouseout are events which require apostrophes instead of quotes.
     
  3. rueterj

    rueterj Certified IT Professional

    Age:
    30
    Posts:
    244
    Likes Received:
    0
    Joined:
    Jan 23, 2008
    Location:
    Sahuarita, Arizona
    Just a minor correction, it's JavaSCRIPT, not Java. There is actually a big difference.

    Also, it May be benneficial to pre-load the images, that way the user doesn't get a broken image onMouseOver because the browser hasn't been given enough time to load them all...




    Then you can call them like this:


     
  4. .ZERO

    .ZERO Nig┬Łga wit a PSD

    Age:
    31
    Posts:
    2,220
    Likes Received:
    1
    Joined:
    May 28, 2006
    Location:
    #gamerenders
    From the page source:

    HTML
    Code:
    <div class="img_box" onmouseover="mt.js.Tip.show(this,'[TEXT HERE]','neutralTip')" onmouseout="mt.js.Tip.hide()">
    [WHAT YOU HOVER OVER HERE]
    </div>

    JS
    Code:
    mt.js.Tip.xOffset = 3;
    mt.js.Tip.yOffset = 22;
    mt.js.Tip.defaultClass = "normalTip";
    mt.js.Tip.tooltipId = "tooltip";
    mt.js.Tip.tooltipContentId = "tooltipContent";
    mt.js.Tip.minOffsetY = 23;
    js.App.ref = [mt.js.Tip];
    js.App.lock = null;
    js.App.lockTimeOut = null;
    js.App.lockButton = null;
    js.App.oldLock = null;
    js.App.lastMessage = null;
    haxe.Timer.arr = new Array();
    haxe.Timer.fqueue = new Array();
    $Main.init = js.App.main();
    that should be right, not sure about the js, thats the only references i could find to mt.js
     
  5. Darkmage

    Darkmage Senior Member

    Posts:
    715
    Likes Received:
    0
    Joined:
    Aug 27, 2005
    Location:
    Texas, U.S.
    Alright thanks for the options guys. I'll try each of these and see which best fits my needs. +rep for each of you.
     
  6. rueterj

    rueterj Certified IT Professional

    Age:
    30
    Posts:
    244
    Likes Received:
    0
    Joined:
    Jan 23, 2008
    Location:
    Sahuarita, Arizona
    You're welcome... Thanks for the rep :)
     
  7. Darkmage

    Darkmage Senior Member

    Posts:
    715
    Likes Received:
    0
    Joined:
    Aug 27, 2005
    Location:
    Texas, U.S.
    What I'm really going for, though, is the way the tip follows the mouse whenever its over the image or text.
     
  8. MattMann

    MattMann Well-Known Member

    Posts:
    334
    Likes Received:
    0
    Joined:
    May 31, 2004
    Location:
    Chicago, IL USA

Share This Page