ole220170: Bei Click auf Bild soll sich text auf das Bild legen

SELF-Forum

Bei Click auf Bild soll sich text auf das Bild legen

ole220170
– Informationen zu den Bewertungsregeln

Hallo zusammen!

Als Newbie steh ich gerade vor einem echten Problem und hoffe, dass ich hier nicht ausgepfiffen werde, sondern Hilfe bekomme.

Also hier nun meine Frage zu meinem Problem.

Ich möchte auf der Startseite ein Bild haben (Kein Problem) und wenn der Besucher darauf clicked soll der Willkommenstext erscheinen (DAS ist DAS PROBLEM) bzw sich auf das Bild legen.

Geht das überhaupt mit HTML? Ich habe $Suchmaschine in allen mir vorstellbaren Kombinationen gefragt, aber bin nicht wirklich fündig geworden.

Ich hoffe sehr, dass mir hier einer helfen kann.

Falls es wichtig ist: Die Seite ist eine mit Joomla 1.0.13stable erstellte Seite.

Vielen Dank im voraus
Ole

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Bei Click auf Bild soll sich text auf das Bild legen

    Glory
    – Informationen zu den Bewertungsregeln

    Ich möchte auf der Startseite ein Bild haben (Kein Problem) und wenn der Besucher darauf clicked soll der Willkommenstext erscheinen (DAS ist DAS PROBLEM)

    Ist ja gut, du brauchst nicht gleich so zu schreien...

    Geht das überhaupt mit HTML?

    Nein dafür brauchst du Javascript. Du kannst das schaffen, indem du das Bild mit einem onClick-Eventhandler belegst und dann einen Funktion schreibst, die ein bereits mit HTML über das Bild gelegte und mit CSS unsichtbar gemachte (display:none) <div> sichtbar macht.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Bei Click auf Bild soll sich text auf das Bild legen

      ole220170
      – Informationen zu den Bewertungsregeln

      Ich möchte auf der Startseite ein Bild haben (Kein Problem) und wenn der Besucher darauf clicked soll der Willkommenstext erscheinen (DAS ist DAS PROBLEM)

      Ist ja gut, du brauchst nicht gleich so zu schreien...

      Sorry, wollte nicht schreien, sondern nur verdeutlichen. Hätte ich anders machen sollen, wohl wahr. Also nochmals sorry.

      Geht das überhaupt mit HTML?

      Nein dafür brauchst du Javascript. Du kannst das schaffen, indem du das Bild mit einem onClick-Eventhandler belegst und dann einen Funktion schreibst, die ein bereits mit HTML über das Bild gelegte und mit CSS unsichtbar gemachte (display:none) <div> sichtbar macht.

      Ah, okay. Da ich mich mit JS nicht auskenne lasse ich das dann erst einmal weg. Oder hättest Du ein Codesnippet parat, andem ich mich versuchen könnte?

      Besten Dank für Deine schenlle Antwort
      Gruß
      Ole

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Bei Click auf Bild soll sich text auf das Bild legen

        gungosh
        – Informationen zu den Bewertungsregeln

        Hallo,

        Ah, okay. Da ich mich mit JS nicht auskenne lasse ich das dann erst einmal weg. Oder hättest Du ein Codesnippet parat, andem ich mich versuchen könnte?

        zum Beispiel wie unten angegeben. Bild ist Hintergrundgrafik, Zelle muss daher dieselben Abmessungen haben, Zelleninhalt wird onclick geändert.

        Und immer schön mindestens mit Internet Explorer und Firefox testen, um zu gewährleisten, dass eine Seite in seltsamen und normalen Browsern funktioniert ;)

        <html><head><title>Text auf Bild</title>  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  
<style type="text/css">
~~~~~~css
  
  
.sizeandfont {  
    height: 181px; width: 208px; /* Höhe/Breite der Grafik */  
    font-size: 24pt; font-weight: bold; color: red;  
    text-align: center; vertical-align: center;  
}  

~~~~~~html
</style>  
<script type="text/javascript">  

~~~~~~javascript
var wuff = false;  
function bellen()  
{  
    if (wuff == false)  
    {  
        wuff = true;  
        document.getElementById("wufftext").innerHTML = "Wuff!";  
    }  
    else  
    {  
        wuff = false;  
        document.getElementById("wufftext").innerHTML = "&nbsp;";  
    }  
}  

~~~~~~html
</script>  
</head><body>  
<table><tr>  
<td id="wufftext"  
    class="sizeandfont"  
    onclick="bellen()"  
    background="http://de.selfhtml.org/css/eigenschaften/anzeige/hund.gif">  
&nbsp;  
</td></tr></table>  
</body></html>

        Grüße,
        Gun

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln