Need a java script

[bandaru.anand]

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..
:D

[magicyte]

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 (http://www.w3schools.com/tags/tag_area.asp)

Map Tag (http://www.w3schools.com/tags/tag_map.asp)

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 (http://www.w3schools.com/)

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

-magicyte

[j0n0]

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.