HTML Question

Discussion in 'Web Design & Coding' started by mav88, Apr 11, 2005.

  1. mav88

    mav88 OSNN Addict

    Messages:
    64
    OK so i have got to design a web site which i have already done, and i have started linking pages etc, and its looking rather nice, even tho i say so myself! Well heres the question. I want to be able to have a few small thumb nail images that act as menu buttons, just a static image, not even a gif or rollover required so thats easy. I want to be able tho to do the following ... when the user puts the pointer over the small thumnail i want a larger pic and or some information to come up on another part of the browser, ie. the name of the image and when it was made etc. So its a rollover event basiclly that loads an image. Now in flash i could do this with my eyes closed, however the site needs to be all HTML!! I presume i will need java script maybe or something however im a little lost ....

    All help will be appricated. ta
     
  2. sean.ferguson

    sean.ferguson Moderator Folding Team

    Messages:
    1,693
    Location:
    Fife; Scotland
    Are you talking about a tooltip that shows images size/name/last modified etc [16.6k - image.gif - 19.02.05] style thing?
     
  3. Lee

    Lee OSNN Proxy

    is this what you mean?

    Code:
    <script>
    var box;
    function showBox(e, boxID) {
       var Ypos;
       var Xpos;
       if (document.all)  {
    	   box = eval('document.all.' + boxID);
    	   Xpos = window.event.x;
    	   Ypos = window.event.y;
       }
       else if (document.getElementById)  {
    	   box = document.getElementById(boxID);
    	   Xpos = e.clientX;
    	   Ypos = e.clientY;
       }
       box.style.visibility = 'visible';
       box.style.left= Xpos + 10 + 'px';
       box.style.top= Ypos  + 20 + 'px';
    }
    function hideBox(){
       box.style.visibility = 'hidden';
    }
    </script>
    <style type='text/css'>
       .tooltip {font-family:verdana;font-size: 11px;padding: 0px;}
    </style>
    <BODY oncontextmenu='return false;' >
    
    <div id='box1' class='tooltip' style='position:absolute; width:150; height:75; background-color:#FFFFFF; border:1px solid black; visibility:hidden; text-align:left;border-bottom:3px solid black;border-right:3px solid black;'><div style='border-bottom:1px black solid; font-weight:bold; padding-left:2px; padding-right:2px; text-align:Left'>Tool Tip</div><div style='padding:3px;font-family:Arial; font-size:12pt; color:#000000'>Tool Tip</div></div><span onmouseMOVE='showBox(event, "box1");' onmouseout='hideBox()'>Tips</span>
    </td></tr></table>
     
  4. xtweaker

    xtweaker Tweaking Monkey

    Messages:
    129
    Location:
    Montreal
    Lee likes this.
  5. Electronic Punk

    Electronic Punk Administrator Staff Member Political User Folding Team

    Messages:
    18,590
    Location:
    Copenhagen, Denmark
    See if you can find an example of what you are after, I did have an idea in my head of what Lee has copiued in, but reading it again, does look like xtweakers eg.

    Trying to think of a site where I have seen a really neat mouse over effect, may well have used javascript similar to:

    http://www.alexa.com/search?q=osnn

    Let the page load and over "Site Info <img>" an info menu should appear.
     
  6. Lee

    Lee OSNN Proxy

    see here unzip rar
     

    Attached Files:

    • tool.rar
      File size:
      694 bytes
      Views:
      40
  7. Electronic Punk

    Electronic Punk Administrator Staff Member Political User Folding Team

    Messages:
    18,590
    Location:
    Copenhagen, Denmark
    Will check it out when I get home, still at work so can't download archives.
     
  8. mav88

    mav88 OSNN Addict

    Messages:
    64
    Thanks for all the replys guys, xtweaker came up with the solution, but all ur help has been valuable. One other question, how do u make a pop up window "pop up" when u click on a link, however tho rather that it be a random sized or maximised internet explorer window how can i set specific size property and center it on the screen? Also how can it be done to load an image when a forward button is pressed, rather that telling it to open up a new *.htm file? So that images in a specific section (i.e photograhy, cg, animation etc) can be loaded when the forward buttons clicked. Im really cack on all this sort of stuff! Im doing a portfolio web site and i want a button to be pressed and then a small window say 320x240 comes up with the higher res image that they have clicked, and then a button which keeps the same window open and just loads in a new image to cycle through some pics and the load up the first one again in a sort of loop.

    Sorry for the length and complexity of the thread

    Thx
     
  9. xtweaker

    xtweaker Tweaking Monkey

    Messages:
    129
    Location:
    Montreal
    You'd have to use the Javscript Window.Open function for this. Look at this http://www.javascript-coder.com/window-popup/javascript-window-open.phtml

    It explains it well. I strongly suggest that you go on and read a few simple Javascript tutorials that explain the basics, you'll need it. All you want to do is relatively easy stuff, you just need to know the syntax. I'm sure you can manage ;)

    Glad I could help!
     
  10. mav88

    mav88 OSNN Addict

    Messages:
    64
    Cheers for the help, i can understand the code when its infront of me, i just carnt write it myslef. Oh well one more night on this and i hopefully should be done. Thx again