Note that there are some explanatory texts on larger screens.

plurals
  1. POInteractive HTML webpage
    primarykey
    data
    text
    <p><strong><em>EDIT:</strong> Thanks for a lot of great examples on how to solve these. I cant decide between who to accept yet, but I will go though all examples and see which I like the most. Great feedback guys! =D</em></p> <hr> <p>I normally do these kind of things in flash, but this time it has to be compatible with mac, iPads and all those units too.</p> <p>So, what do I need help with?</p> <p>I've got a picture, with some "hotspots" on. I want to be able to click any of those hotspots to show some information.</p> <p>This should be fairly basic and easy to achieve, but since I've never done this in html before I have to ask you guys =) </p> <p>So, what would be the best way to do this? It have to be compatible with any browser and device, and it doesnt need to be very advanced. If it's possible to add effects to the box (sliding out, fading in, or anything like that) then thats a nice bonus, but not something I need.</p> <p>Any help would be great!</p> <p><strong>BREAKDOWN:</strong></p> <p>I have a background image with some "hotspots" (numbers 1 and 2 in my example). The users should be able to either hover the mouse over any of these or click it to get more information, as seen in picture #2</p> <p><img src="https://i.stack.imgur.com/FYLGr.png" alt="http://i50.tinypic.com/so5nw1.jpg"></p> <hr> <p>This is that happens when you hover/click any of these hotspots. Text and image is displayed inside a nice little info box.</p> <p><img src="https://i.stack.imgur.com/gxSBx.png" alt="http://i49.tinypic.com/1449o28.jpg"></p> <hr> <p>If the user clicks "more information" it will open up even further to display more information if available. Like in this img:</p> <p><img src="https://i.stack.imgur.com/HDTct.png" alt="http://i50.tinypic.com/2502fzq.jpg"></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload