:: Buchempfehlung ::

makro · #1 23.04.2015, 12:26:25

Hallo,
gleich zu Anfang: ich bin Beginner in JS / HTML!

Ich möchte per MouseOver eine Grafik an eine definierte Stelle erscheinen lassen und beim Verlassen die Grafik ausblenden.
Mit Texten funktioniert es, mit Grafiken leider nicht (Start1 funktioniert, Start2 ist fehlerhaft).
Kann mir jemand einen Tipp geben wo meine Fehler liegen?

HTML-Code:

<!DOCTYPE HTML PUBLIC>

<html>
   <head>

   <style>
   div {
    width:900px;
    height: 300px;
    margin: 10px;
    float: left;
    text-align: center;
    background-color: lightgray;
   }
   </style>

  </head>

  <body>
    <h2>Test</h2>
        <img id="start1" src="Minigolf/start1.png" width="200"
        onMouseOver='document.getElementById("test").innerHTML = "Hallo Welt" '
        onMouseOut='document.getElementById("test").innerHTML = ""'>

        <img id="start2" src="Minigolf/start2.png" width="200"
        onMouseover='document.getElementById("test").innerHTML = <img src="Minigolf/2.png" width="100" '
        onMouseOut='document.getElementById("test").innerHTML = ""'>

    <div id="test"></div>

  </body>
</html>

Ckaos · #2 23.04.2015, 12:48:39

Hi,

dir fehlen noch ein paar Zeichen ;)

Code:

<img id="start2" src="Minigolf/start2.png" width="200"
        onMouseover='document.getElementById("test").innerHTML = "<img src=\"Minigolf/2.png\" width=\"100\">" '
        onMouseOut='document.getElementById("test").innerHTML = ""'>

MfG

CKaos

sysop · #3 23.04.2015, 13:39:33

Das geht aber schöner mit reinem CSS, ohne JS

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>test</title>
</head>
<body>

<style type="text/css">


.info
{
   display: none
}

#textausgabe
{
   float: left;
   width: 10%;
   padding: 0.5em;
}

#textausgabe A:hover .info
{
   DISPLAY: block;
   BACKGROUND: none transparent scroll repeat 0% 0%;
   margin-LEFT: 60%;
   PADDING-BOTTOM: 0px;
   COLOR: black;
   PADDING-TOP: 200px;
   POSITION: absolute;
   TOP: 0px;
   HEIGHT: 50px;
}
</style>


<div id="textausgabe">
<a name="bla" title="02.04.2015 [11:08]">Text<span class="info"><img src="IMG_PATH" width="300" height="161" alt="ALTERNATIV_TEXT"></span></a>
</div>

</body>
</html>

makro · #4 23.04.2015, 13:41:26

Oh, Danke für die super schnellen Antworten.

Was für eine Ausgabe haben das \ und das ">" in der folgenden Zeile?

HTML-Code:

onMouseover='document.getElementById("test").innerHTML = "<img src=\"Minigolf/2.png\" width=\"100\">" '

mfg

makro · #5 23.04.2015, 14:00:46

Hat sich erledigt hab die Antwort :)

:: Buchempfehlung ::

:: Anbieterverzeichnis ::

Globale Branchen

Informieren Sie sich über ausgewählte Unternehmen im Anbieterverzeichnis von SELFPHP

:: Newsletter ::

Abonnieren Sie hier den kostenlosen SELFPHP Newsletter!