The task is the following ... There is a picture with dimensions of 1000 * 768 pixels ... It is necessary when you hover over some objects so that they are highlighted ... And the designer drew so that there is not just a highlight, but also the addition of some elements + the signature is displayed ... I post 2 pictures before guidance and that after guidance ... Can someone tell me a good solution ...

alt text

alt text

It’s just that divas will not be received because the objects are not even and will be mutually clinging to each other ... Already thought with the idea to create a <map> tag and hang an onmouseover event for each <area> and it should be made onmouseout and transparent to opaque for these events ...

And how to make tooltips such as drawn translucent ...

In general, nothing good happened ... Maybe someone made such non-standard typesetting ???

Here is a link to which you can see the DEMKA as it is done right now ... http://demo.versal.cn.ua/

  • one
    Try: use map and in arta in parameter alt put div - timka_s
  • And flash? - Oleg Arkhipov

4 answers 4

You place a block with a picture with positioning relative , in it, let's say, you put your picture in the background. Further inside you create blocks with pop-up hints, inside you place a frame and text. Position them absolutely, arrange them as expected. Styles put them disblay:none . Next, when you hover over any of these blocks, you call the onMouseOver event onMouseOver and show the show(); block show(); . If without javascripts, then in css - div:hover{display:block;} . And there will be happiness)

  • Yazh wrote ... the edges are not even in pictures ... it turns out that if you hover on a lantern - then the lawn will light up ... because the lantern unit will be on top of the lawn unit ... So this option is unlikely to roll ... - Oll
  • Yes, a great option! It is not necessary to highlight the entire lawn, just a small area is made that reacts to guidance, and what to highlight later is a third matter. @Barton gave good advice! - metazet
  • Vseravno something I do not understand ... it’s necessary that the whole element is highlighted on which you hover ... Guidance occurs on the div according to his advice ... His way is that you direct it near the lawn near the fountain .. in the hole ... and it will highlight lawn because it is still a piece of it ... it is wrong for mine ... - Oll
  • well, if not even then draw a map, hang IDs and show blocks with hints on them, but I think that such divas will not spoil you, as I wrote porridges to you - Barton
  • spoil spoil ... at least in this situation ... will be cotovasiya with guidance ... - Oll

I will sound louder an idea that has already sounded: A picture map will save the world. Look for the map editor (for example, there is one in Dreamweaver), so as not to fit the coordinates. Meaning: in the image there are areas of any shape that are active.

 <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" /> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" /> <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury" /> <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus" /> </map>

    Well, if the map and div does not fit, then only flash. IMHO perfect option!

    • Well, see ... If you put the div immediately to the place where it should appear with the display parameters: none; then immediately the map ceases to be necessary because that div goes over and it doesn’t show through ... it turns out you need to put a background, place a div on top with display: none - and already in this diva hold on a new picture map. It turns out you need to do 2 times the map ... on the background and on the internal divs ... - Oll

    As another option, you can use the canvas and raphael library ( example ). Although it will turn out the same map.