✔ Bild vorzeitig einblenden ohne Mausklick

D

derFelix98

Grünschnabel
Hallo, ich weiß jetzt zwar nicht ob ich das jetzt hier richtig herein gepostet habe aber zu meiner Frage:

Ich wollte mal Fragen, ob ich ein Bild (die Quelle des Bildes ist bekannt) per HTML-Coder, oder ein Script oder bei Elemet im Quelltext ohne ein Mausklick einfügen kann?

Normal klickt man ein Feld von zweien an und da kommen zwei unterschiedliche Bilder. Ist dies Möglich das man die Bilder davor einblenden kann, bevor man das Feld anklickt?

Im Grunde unsichtbare Bilder auf der Website einblenden.

Danke schon mal :)
 
Wenn ich das, was du willst richtig verstehe benötigst du da etwas mehr als nur reines HTML.

Was du benötigst ist JavaScript und ein paar Event-Handler.
Da wäre z.B. das Event onmouseover.

Hier ein kleines Beispiel mit Mouseover und Mouseout:
HTML: 
<html>
    <head>
        <script type="text/javascript">
function hideDiv( ) {
    document.getElementById('mydiv2').style.display = 'none';
}

function showDiv( ) {
    document.getElementById('mydiv2').style.display = 'block';
}
        </script>
        <style>
        div {
  position: absolute;
}

#mydiv1 {
  border: 1px solid black;
  width: 240px;
  height: 480px;
}

#mydiv2 {
  background-color: red;
  display:none;
  width: 120px;
  height: 240px;
}
        </style>
    </head>
    </body>
        <div id="mydiv1" onmouseover="showDiv();" onmouseout="hideDiv();">

        </div>
        <div id="mydiv2">

        </div>
    </body>
</html>
 
Meine Frage ist jetzt, erstens wo füge ich den Link des Bildes ein und zweitens ich muss das in die console einfügen oder?
 
Hallo,

ich würde das ganze jetzt nicht über Javascript lösen sonder über CSS.

Also ich hab das jetzt so Verstanden, das du z.B. ein Element hast das leer ist. Sobald du allerdings mit der Maus darüber bist, soll ein bild angezeigt werden.
Dafür empfehle ich folgenden Code:

HTML: 
<div class="container">
    <p>empty box</p>
</div>

CSS: 
/* Grundeinstellungen */
.container {
    border: 1px solid #000;
    height: 200px;
    width: 200px;
    text-align: center;
}
/* Sub-Element das aktiviert wird sobald der Mauszeiger über dem Element ist*/
.container:hover {
    /* background: url(background.png); <-- Wenn man ein bild einbinden möchte*/
    background: #ff0000; /* Setzt den Hintergrund auf Rot */
}


Mit freundlichen Grüßen

Sp1r1t
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück