Results 1 to 3 of 3

Thread: Need a java script

  1. #1
    Join Date
    Sep 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Need a java script

    Hi.......

    I had a some problem....in java script...like...

    Problem... i need a script like " in a image a particular area should be hight light when my mouse over.....
    example like the online e-new papers...

    http://epaper.thehindu.com/svww_index1.php

    after this at right side u will found demo plz click on that....

    now moune over the paper... a partcular area will be highlited...

    now i need that script it may be any php or java any thing....plz..

  2. #2
    Join Date
    Jun 2008
    Posts
    589
    Thanks
    13
    Thanked 54 Times in 54 Posts
    Blog Entries
    1

    Default

    I do have one suggestion. Use the map element in HTML. The image map seperates images into seperate parts. Here is an example from W3Schools:

    Area Tag

    Map Tag

    These links will help you to seperate images into seperate parts. I assume that you are able to code the rest to highlite the images.

    Here is the W3Schools homepage: W3Schools

    Hope you have luck!! I am sorry that I could not code you anything...

    -magicyte

  3. #3
    Join Date
    Oct 2008
    Location
    Pretoria, South Africa
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    You could try this:

    Put the paper in a div tag - make the div tag style=position:relative;width:same_asPaper
    inside the div add as many div you need for highlighting and add
    <div this is the outer div as discussed>

    <img src=paper.jpg style=position:absolute;top:0;left:0>
    <div onmouseover="this.style.opacity=0.5;this.style.filter='alpha(opacity=50)'" onmouseout="this.style.opacity=0;this.style.filter='alpha(opacity=0)'" style="position:absolute:top:0;left:0;height:80;width:80;background:yellow;border-style:solid;border-width:1;border-color:red;opacity:0;filter:alpha(opacity=0)" title="Some info">

    </div outer>
    Remember to make the divs visible when you move them around for positioning.

    I recommend finding a good js tooltip for the div mouseovers to show the article they mouseover in more details with a picture.
    Last edited by j0n0; 10-02-2008 at 01:51 PM. Reason: correction

Bookmarks

Posting Permissions

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