PHP Forum - Java Skript Bild per MouseOver einfügen

PHP Forum (http://www.selfphp.de/forum/index.php)

- HTML, CSS und JavaScript Help! (http://www.selfphp.de/forum/forumdisplay.php?f=24)

- - Java Skript Bild per MouseOver einfügen (http://www.selfphp.de/forum/showthread.php?t=25572)

makro

23.04.2015 12:26:25

Java Skript Bild per MouseOver einfügen

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

23.04.2015 12:48:39

AW: Java Skript Bild per MouseOver einfügen

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

23.04.2015 13:39:33

AW: Java Skript Bild per MouseOver einfügen

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

23.04.2015 13:41:26

AW: Java Skript Bild per MouseOver einfügen

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

23.04.2015 14:00:46

AW: Java Skript Bild per MouseOver einfügen

Hat sich erledigt hab die Antwort :)

Alle Zeitangaben in WEZ +2. Es ist jetzt 19:10:58 Uhr.