Just nu i M3-nätverket
Gå till innehåll

Klicka på en karta och visa bild...


Kalle Dator1

Rekommendera Poster

Kalle Dator1

Hej !

På en webbsida, innehållande en områdeskarta med fördefinierade fältkoordinater enligt nedanstående, vill jag att sidans besökare ska kunna klicka och bli visade ett foto över just den positionen - helst direkt ovanför just den klickade positionen !
Kan detta utföras med bara en inbäddad image, eller måste en ny webbsida - av ett mindre format och bara innehållande bilden - laddas upp ?

Det måste ju gå att smidigt klicka bort bilden igen, för att kanske titta på en annan kartposition !

Exempel på positionsbestämd klickarea för att öppna en ny webbsida i en iframe:

<map name="areamap">
<area shape="rect" coords="184, 20, 228, 35" href="webbsida.htm" target="iframe1" alt="Sidnamn" >
.
.
</map>

Tacksam över några bra förslag på html-kod !

 

/Kalle

Länk till kommentar
Dela på andra webbplatser

Ett sätt är att med hjälp av javascript känna av när användaren klickar eller håller över en area i bilden (kartan) och då visa en div som tidigare var dold där du ställt in koordinaterna vart denna div ska visas.

 

Skulle det vara ett alternativ?

Länk till kommentar
Dela på andra webbplatser

Kalle Dator1

Tack Jonas_B för svar !

 

Ingen dum idé alls.

Då kunde man ha samtliga bilder, som är knutna till sina respektive areor, dolda på webbsidan och färdiga att visas vid klick på avsedd area. Förutsatt då att webbsidan dessförinnan rensas på alla eventuella tidigare bilder vid varje klick på en area innan ny bild visas.

 

Men hur döljer man en bild på en webbsida ?

 

Kan du exemplifiera med ett kodförslag, eller hänvisa till något uppslag !

 

/Kalle

Länk till kommentar
Dela på andra webbplatser

Kalle Dator1

Forskat lite och funderar nu i de här banorna. Kan det vara något att bygga vidare på ? :

Man låter webbsidan inledas utan några bilder, frånsett den preparerade kartbilden.

Klick på en bestämd kart-area, laddar upp en tillhörande bild på avsedd position, visad på ett 'layer' med taggen <div>..</div>

En klick på (en) nästa area, gör först en omladdning av webbsidan [webbsidan.location.reload(true);], som därmed blir tom, frånsett kartbilden, innan koden för den klickade arean laddar upp en ny bild, som hör ihop med klickad kart-area.....

(Bör kunna ske med endast en kort blinkning..)

 

Är dock lite osäker på koden för reload !

(Kanske inte heller helt säker på om koden för ny bild hinner läsas in innan webbsidan uppdateras.. Lite som att lyfta sig själv i håret !)

 

/Kalle
 

Länk till kommentar
Dela på andra webbplatser

<div id="myMap" style="position:relative">
  <map name="areamap">
    <area id="area1" shape="rect" coords="184, 20, 228, 35" href="webbsida.htm" target="iframe1" alt="Sidnamn" >
    ...
  </map>
  <div style="display:none;left:20px;right:20px;position:absolute" id="bild1">
    <img src="minbild1.jpg"/>
  </div>
  <div style="display:none;left:40px;right:40px;position:absolute" id="bild2">
    <img src="minbild2.jpg"/>
  </div>
</div>

Sedan med javascript en lyssnare på id "area1" som först släcker alla lager och sedan tänder lager bild1. 

Då slipper du också en reload.

Länk till kommentar
Dela på andra webbplatser

Arkiverat

Det här ämnet är nu arkiverat och är stängt för ytterligare svar.

×
×
  • Skapa nytt...