• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bild im selben Fenster öffnen

diefrangende

diefrangende

Neues Mitglied
Hallo, ich schäme mich so eine einfache frage zu stellen, aber ich finde keine Lösung. Gut ich bin jetzt auch nicht wirklich schlau was html und so angeht. Wäre toll wenn sich jemand erbarmt. Hier zu meinem Problem:

Ich habe eine Weltkarte erstellt, und darauf habe ich die Ländernamen als Grafik eingefügt. Ich würde gerne beim Klicken eines Landes (etwas weiter unten) eine weitere Grafik (mit Infos) auftauchen lassen. Es sind einige Länder und zu jedem habe ich eine Infotafel-Grafik, welche immer auf der gleichen stelle auftauchen sollen aber sich ändert wenn man ein anderes Land anklickt.

Ich hab da mal was vorbereitet ^^
welt.png
 
Hallo,

ohne Online-Beispiel was du aktuell erreicht hast kann man dir nicht helfen.

Außerdem müssen wir wissen, für welche Fenstergrößen das funktionieren soll. Was ist mit Smartphones und Tablets?

Gruss

MrMurphy
 
Du musst dich nicht schämen, und so ganz einfach ist das Problem auch nicht zu lösen. :)

HTML alleine hilft dir hier nicht weiter. Damit beim Klick unten eine Infografik eingeblendet wird, benötigst du JavaScript. Aber wie McMurphy schon erwähnte, lässt sich da ohne Quelltext nicht viel zu sagen.
 
Super danke für eure schnelle Antwort. Klar alles kein problem

:oops: welchen teil soll ich den posten. alles geht ja nicht, ich hab jetzt mal das da rausgesucht. ist das ok?

Es soll auf Pc funktionieren.

Code: 
<html>
<head>
  <title>Affiliates</title>
</head>
<body
style="margin-top: 0pt; margin-bottom: 0pt; padding-top: 0pt; padding-bottom: 0pt; height: 100%; width: 100%; z-index: auto; min-height: 100%; min-width: 1024px; top: 0pt; left: 0pt; background-repeat: repeat-y; background-attachment: fixed; color: rgb(0, 0, 0); background-color: rgb(255, 251, 214);"
alink="#000099" link="#000099" vlink="#990099">
<img onmousemove="Denmark.src='denmark-clear.gif'"
onmouseout="Denmark.src='Denmark.png'"
style="position: absolute; z-index: 2; left: 734px; width: 40px; top: 1069px; height: 29px;"
name="Denmark" title="Denmark" alt="Denmark.png"
src="Denmark.png">
&nbsp;&nbsp;<img
style="background-repeat: repeat-y; background-attachment: scroll; position: fixed; top: 10px; left: 4px; width: 114px; height: 948px; float: left;"
alt=""
src="file:///C:/Users/Flocke/Desktop/Honey/home/streifenlinks.png"><br>

<img
style="position: absolute; width: 350px; height: 313px; top: 122px; left: 257px;"
alt="IJL"
src="file:///C:/Users/Flocke/Desktop/Honey/home/LogoIJL.jpg"><img
style="background-repeat: repeat-y; background-attachment: scroll; position: fixed; top: 10px; left: 4px; width: 114px; height: 948px; float: left;"
alt="" src="streifenlinks.png"><img
style="background-repeat: repeat-y; background-attachment: scroll; position: fixed; top: 10px; left: 4px; width: 114px; height: 948px; float: left;"
alt="" src="streifenlinks.png"><br>

<img
style="right: 4px; position: fixed; top: 10px; width: 114px; height: 948px;"
alt="" src="streifenrechts.png"><br>
<br>
<div style="text-align: left;"><br>
</div>

<img
style="position: absolute; z-index: 2; top: 1156px; height: 27px; left: 693px; width: 43px;"
onmousemove="Belgium.src='animflagB.gif'"
onmouseout="Belgium.src='Belgium.png'" name="Belgium"
title="Belgium" alt="Belgium.png" src="Belgium.png"><br>
<br>
<img onmousemove="Australia.src='animflagAUS.gif'"
onmouseout="Australia.src='Australia.png'"
style="position: absolute; z-index: 2; top: 1480px; height: 50px; left: 1170px; width: 68px;"
name="Australia" title="Australia" alt="Australia.png"
src="Australia.png"><img
onmousemove="Norway.src='animflagNW.gif'"
onmouseout="Norway.src='Norway.png'"
style="position: absolute; z-index: 2; top: 989px; height: 32px; left: 724px; width: 52px;"
name="Norway" title="Norway" alt="Norway.png"
src="Norway.png"><br>


<table
style="text-align: left; position: absolute; height: 348px; width: 604px; top: 1941px; left: 154px;"
border="1" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td
style="vertical-align: top; white-space: nowrap; width: 594px;">
      <table style="width: 600px; height: 760px;" border="0"
cellpadding="0">
        <tbody>
          <tr>
            <td colspan="2"
style="vertical-align: top; height: 53px;"><big><big><font
color="#800000" face="Sylfaen"><u><strong>IJL
Board of Representatives</strong></u></font></big></big>
            <p style="width: 316px;">&nbsp;</p>
            </td>
            <td style="height: 53px;" colspan="2"
valign="top"><font color="#800000" face="Sylfaen"><big><big><u><strong>IJL
Board of Auditors</strong></u></big></big></font>
            <p>&nbsp;</p>
            </td>
          </tr>
          <tr>
            <td style="height: 45px;" valign="top"><img
src="http://users.skynet.be/hackamores/IJL/flagS.gif"
alt="flagS.gif (168 octets)" height="28" width="44"></td>
            <td style="vertical-align: top; height: 45px;"><font
color="#800000" face="Sylfaen"><big>Asa Cidh </big></font></td>
            <td style="vertical-align: top; height: 45px;"><font
color="#800000" face="Sylfaen"><img
src="http://users.skynet.be/hackamores/IJL/flagNW.gif"
alt="flagNW.gif (300 octets)" height="26" width="44"></font></td>
          [das ginge hier noch so weiter]</td>
          </tr>
        </tbody>
      </table>
      </td>
    </tr>
  </tbody>
</table>

</body>
</html>
 
Hast du den Code selber geschrieben oder durch einen Generator erzeugen lassen? Da sind Tags enthalten, die es überhaupt nicht mehr gibt, und die Bilder wurden nur lokal von der Festplatte verlinkt.. Aus diesem Snippet lässt sich nichts Vernünftiges machen. Schreibe das noch mal per Hand, ohne Tabellenlayout, Inline-CSS, onmousedingens und Tags wie big, face align, etc. Ebenso gehört natürlich ein Doctype an den Anfang.

Für das Verständnis reicht ein kurzes, einfaches HTML-Script mit zwei Div-Containern. Im ersten liegt ein einziges Bild und der zweite bleibt leer. Darin soll das entsprechende Pendant geladen werden. Also quasi etwas wie:

HTML: 
<div id="box_1">
  <img class="bilder" src="belgien.gif" alt ="belgien">
</div>
<div id="box_2"></div>
 
Es liegt wohl daran das ich das mit NVU gearbeitet habe ^^

ich hab eigentlich schon vieles erstellt, aber hier stoß ich an meine grenzen.
 
Ein einfaches HTML-Grundgerüst incl. Doctype, Head, Body und den vor mir geposteten 4 Zeilen Code solltest du schon eigenständig hinbekommen. Sonst bringt es nicht wirklich etwas, hier mit JavaScript weiterzumachen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben