# Was muß anstatt von 'homepage' eingefügt werden?



## molebreaker (27. Mrz 2018)

Hallo, ich will einen tooltip mit Javascript erstellen (wz_tooltip.js). in der Dokumentation dazu steht. "Die Tags benötigen je ein onmouseover- und ein onmouseout-Attribut:"
	
	
	
	





```
<a href="index.htm" onmouseover="Tip('Some text')" onmouseout="UnTip()">Homepage </a>
```
Bei mir ist anstelle von 'homepage' ein Bild.


----------



## Thallius (27. Mrz 2018)

Java ist kein Javascript 

Du must diesen Teil


```
onmouseover="Tip('Some text')" onmouseout="UnTip()
```

in dein img tag packen. Also du hast ja wahrscheinlich für das Bild sowas wie


```
<img src='...>
```

Wenn du das oben vor das src= schreibst sollte es klappen.

Gruß

Claus


----------



## molebreaker (28. Mrz 2018)

Danke Thallus,
nun aber habe ich zwei Bilder nebeneiander
der code lautet:

```
<a href="Malerei/Acrylmalerei/album/slides/Eis.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/eis.jpg" width="200" height="166" alt=""onmouseover="Tip('zur größeren Ansicht')" onmouseout="UnTip()</a>
```


----------



## Thallius (28. Mrz 2018)

Da fehlen auch einige leerzeichen und Anführungszeichen. Du must schon ein wenig sorgfältiger arbeiten...


----------



## molebreaker (28. Mrz 2018)

Wo fehlen da Leerzeichen und Anführungszeichen. Ich kann nichts finden.

```
<h2>Acrylbilder</h2>
    <div>
  
    <a href="Malerei/Acrylmalerei/album/slides/Eis.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/eis.jpg" width="200" height="166" alt=""onmouseover="Tip('zur größeren Ansicht')" onmouseout="UnTip()</a>
      
        </div>
    <h3>Eis</h3>
    <p>Acryl auf Leinwand<br>60 x 50cm
    </div>
  
        <hr>
```


----------



## mrBrown (29. Mrz 2018)

Was vor allem fehlt, ist das schließen den img-Tags 
Hinter `onmouseout="UnTip()` muss noch ein `"/>`.

Das da zwei Bilder zu sehen sind, sollte allerdings nicht daran liegen...


----------



## molebreaker (30. Mrz 2018)

Jetzt habe ich das Problem mit den Bildern gelöst, aber dafür sind nun alle Texte (Titel, Angaben zum Bild) unterstrichen.


----------



## krgewb (30. Mrz 2018)

Dazu brauchen wir den aktuellen Quelltext.


----------



## sascha-sphw (31. Mrz 2018)

molebreaker hat gesagt.:


> Jetzt habe ich das Problem mit den Bildern gelöst, aber dafür sind nun alle Texte (Titel, Angaben zum Bild) unterstrichen.



Wie @Thallius schon geschrieben hat, Du musst unbedingt sorgfältiger arbeiten. Du Hast offensichtlich mit den Tags was falsch gemacht, womit jetzt der Text ebenfalls innerhalb des Anchor Tags ist, dadurch unterstreicht der Browser den Text.


----------



## molebreaker (31. Mrz 2018)

```
<body>
[/LIST]
            <script type="text/javascript" src="wz_tooltip.js"></script>
   
    <h2>Acrylbilder</h2>
    <div>
  
    <a href="Malerei/Acrylmalerei/album/slides/Eis.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/eis.jpg" width="200" height="166" alt=""onmouseover="Tip('zur größeren Ansicht')" onmouseout="UnTip()"/>
      
        </div>
```


----------



## molebreaker (31. Mrz 2018)

```
<body>
[/LIST]
            <script type="text/javascript" src="wz_tooltip.js"></script>
   
    <h2>Acrylbilder</h2>
    <div>
  
    <a href="Malerei/Acrylmalerei/album/slides/Eis.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/eis.jpg" width="200" height="166" alt=""onmouseover="Tip('zur größeren Ansicht')" onmouseout="UnTip()"/>
      
        </div>
```


----------



## molebreaker (31. Mrz 2018)

Danke für den Hinweis. Beim ersten Bild ist es nun gelungen, leider bei den anderen nicht,  obwohl die Veränderung (ich habe den Teil "Überschrift" und "Bildbeschreibung" vor den Link gesetzt) bei allen gleich ist, klappt es nur beim Bild "Eis"
Ich schaue und schaue, der Quelltext ist bei allen gleich und trotzdem ist nur der Effekt des Unterstreichens nicht bei allen. Ich komme einfach nicht drauf.

```
<div>
    <h3>Eis</h3>
    <p>Acryl auf Leinwand<br>60 x 50cm</p>
    <a href="Malerei/Acrylmalerei/album/slides/Eis.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/eis.jpg" width="200" height="166" alt=""onmouseover="Tip('zur größeren Ansicht')" onmouseout="UnTip()"/>
    </div>
  
    <div>
    <h3>Durch den Wald</h3>
    <p>Acryl auf Leinwand<br>60 x 50cm</p>      
    <a href="Malerei/Acrylmalerei/album/slides/Durch den Wald.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/durch_den_wald.jpg" width="200" height="166" alt=""onmouseover="Tip('zur größeren Ansicht')" onmouseout="UnTip()"/>
    </div>
```


```

```


----------



## krgewb (31. Mrz 2018)

Nun fehlt das schließende a-Tag. Vorhin hattest du es doch noch!?


----------



## molebreaker (31. Mrz 2018)

Danke, das wars!


----------



## molebreaker (31. Mrz 2018)

Nun habe ich da noch ein anderes toolkit script, ich habe es hier https://www.w3schools.com/css/css_tooltip.asp gefunden. Es gefällt mir besser, da der tooltip auffälliger ist. Leider habe ich da wieder das Problem, dass der Tooltip schon erscheint, wenn man in die Nähe des Bildes kommt. Da hilft mein Vorgehen, den Titel und den Bildtext oberhalb des Links zu schreiben, diesmal nicht
eingebunden habe ich es so:

```
<body style="text-align:center;">
    
    <h2>Acrylbilder</h2>
   
            <div class="tooltip"><p><a href="Malerei/Acrylmalerei/album/slides/Eis.jpg"></p><img src="Malerei/Acrylmalerei/album/thumbs_web/eis.jpg" width="200" height="166" alt=""onmouseover="Tip('zur größeren Ansicht')" onmouseout="UnTip()"/>
       <span class="tooltiptext">zur größeren Ansicht</span>
```


----------



## krgewb (31. Mrz 2018)

Jetzt fehlt ja wieder das schließende a-Tag!

Der Fehler liegt aber an dem p-Tag. Hier brauchst du kein p.


----------



## molebreaker (1. Apr 2018)

Nun habe ich da noch ein anderes toolkit script:


----------



## molebreaker (1. Apr 2018)

Vielen Dank krgewb, immer der fehlende a-Tag
Warum brauche ich kein p? Steht doch in der Dokumentation.


----------



## molebreaker (1. Apr 2018)

Noch ein Schönheitsfehler, dessen Ursache ich nicht finde: Nach jedem Bild geht eine waagrechte Linie über die Seite.


----------



## krgewb (1. Apr 2018)

Ich weiß es nicht. Hast du schließende div-Tags?


----------



## molebreaker (1. Apr 2018)

Habs auch schon entdeckt und beseitigt. Weil Du mir soviel geholfen hast und weil Ostern ist, bekommst Du ein Osterei von mir


----------



## molebreaker (1. Apr 2018)

Leider noch ein kleiner Schönheitsfehler: der tooltip erscheint schon, wenn ich mit der Maus noch außerhalb des Bildes bin.


----------



## krgewb (1. Apr 2018)

Du kannst die Seite in Firefox öffnen und dann Rechtsklick -> Seitenquelltext anzeigen
Da werden Fehler in roter Schrift angezeigt.


----------



## molebreaker (1. Apr 2018)

Es wurden einige Fehler angezeigt und ich habe sie behoben, am Problem hat sich aber nichts verändert. Sobald ich mit der Maus auf die Hintergrundfläche (body?) komme, wird der tooltip angezeigt. Hier mal der css code, der dafür in Frage kommt:

```
<style text>
         body {
        background-color: #63B8FF;
    }
   
        h2
        {
            color:black;
            font-family:arial, "lucida console", sans-serif;
            text-align: center;
            }
        h3
            {
              color:red;                   
        text-align: center;
         color:red;
         font-family:arial, "lucida console", sans-serif;
         text-align: center;}
        p
            {
            text-align: center;
                }
               
       
            hr {
  background: #000;
border: none;
color: #000;
height: 1px;
width: 30%;
 
}
div {
width: 100%;
text-align: center;
}
  figure {
width: 100%;
text-align: center;
}
```

Vielleicht kannst Du was damit anfangen.


----------



## krgewb (1. Apr 2018)

Wieso steht da das Wort text?

```
<style text>
```


----------



## molebreaker (1. Apr 2018)

http://www.walterzorn.de/tooltip/tooltip.htm


krgewb hat gesagt.:


> Wieso steht da das Wort text?
> 
> ```
> <style text>
> ```


steht so in der Dokumentation unter 





> *2. In die HTML-Datei einbinden*


Auch der html check bemängelt dies.
Nur was soll dann dort stehen?


----------



## krgewb (1. Apr 2018)

Da steht etwas komplett anderes:

```
<script type="text/javascript" src="wz_tooltip.js"></script>
```


----------



## krgewb (1. Apr 2018)

molebreaker hat gesagt.:


> Wo fehlen da Leerzeichen und Anführungszeichen. Ich kann nichts finden.
> 
> ```
> <h2>Acrylbilder</h2>
> ...


Du kannst hier im Forum bei den code-Tags spezifizieren, dass es sich um HTML handelt.

```
<h2>Acrylbilder</h2>
    <div>
 
    <a href="Malerei/Acrylmalerei/album/slides/Eis.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/eis.jpg" width="200" height="166" alt=""onmouseover="Tip('zur größeren Ansicht')" onmouseout="UnTip()</a>
     
        </div>
    <h3>Eis</h3>
    <p>Acryl auf Leinwand<br>60 x 50cm
    </div>
 
        <hr>
```
Nun erscheint alles innerhalb der Anführungszeichen rot. Man sieht sehr schön, dass ganz rechts etwas nicht stimmt. Das schließende a-Tag ist nämlich rot.


----------



## molebreaker (1. Apr 2018)

```
<body>
        <script type="text/javascript" src="wz_tooltip.js"></script>
  
    <h2>Acrylbilder</h2>
 
            <div class="tooltip"><span class="tooltiptext">zur größeren Ansicht</span><a href="Malerei/Acrylmalerei/album/slides/Eis.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/eis.jpg" width="200" height="163" alt=""/>
    <h3>Eis</h3>
    <p>Acryl auf Leinwand<br>60 x 50cm
```
Bei mir erscheint da nichts rot???
edit sorry in der Vorschau war das nicht zu sehen. Welche Fehler sind das denn?


----------



## mrBrown (1. Apr 2018)

Du hast mittlerweile gefühlt 17 Varianten des Code gepostet, vermutlich hat niemand mehr einen Überblick, welche Frage sich jetzt auf welchen Code bezieht.

Da dein jetziger Code völlig anders ist, ist der von @krgewb genannte Fehler natürlich nicht mehr vorhanden.

In deinem aktuellstem werden `div`, `a` und `p` nicht explizit geschlossen.
Implizit wird das `div` sie damit erst am Ende des `body` geschlossen, womit eben alles diesen Tooltip hat.


Welchen Editor benutzt du zum Schreiben? Einer mit passendem Syntax-Highlighting und passende Einrückung würde dir das vermutlich deutlich vereinfachen


```
<body>
    <script type="text/javascript" src="wz_tooltip.js"></script>
 
    <h2>Acrylbilder</h2>
 
    <div class="tooltip">
        <span class="tooltiptext">
            zur größeren Ansicht
        </span>
        <a href="Malerei/Acrylmalerei/album/slides/Eis.jpg">
            <img src="Malerei/Acrylmalerei/album/thumbs_web/eis.jpg" width="200" height="163" alt=""/>
            <h3>
                Eis
            </h3>
            <p>
                Acryl auf Leinwand
               <br>
               60 x 50cm
```


----------



## molebreaker (2. Apr 2018)

mrBrown hat gesagt.:


> Welchen Editor benutzt du zum Schreiben? Einer mit passendem Syntax-Highlighting und passende Einrückung würde dir das vermutlich deutlich vereinfachen


Ich benutze Dreamweaver


----------



## krgewb (2. Apr 2018)

```
<script type="text/javascript" src="wz_tooltip.js"></script>
```
Die Zeile setzt voraus, dass sich in demselben Ordner wie die html-Datei eine Datei namens wz_tooltip.js befindet.


----------



## molebreaker (2. Apr 2018)

Das ist so. Ich würde ja gerne das tooltip nach https://www.w3schools.com/css/css_tooltip.asp verwenden, aber ich bekomme es enfach nicht hin, dass sich nicht alle tooltips öffnen, sobald man nur in den Bereich kommt.
Da ist mir das tooltip mit 





> cite


am liebsten, da gibt es keine Probleme. Außerdem möchte ich mich mehr in CSS einarbeiten.


----------



## krgewb (2. Apr 2018)

Dein Zitat wurde verschluckt!?


----------



## molebreaker (3. Apr 2018)

krgewb hat gesagt.:


> Dein Zitat wurde verschluckt!?


Welches Zitat?


----------



## krgewb (3. Apr 2018)

Da steht nur: cite


----------



## molebreaker (3. Apr 2018)

Da wurde nichts veschluckt, das ist ein tooltip der folgendermaßen eingebunden wird

```
<cite title="zur größeren Ansicht">    
    <a href="Malerei/Acrylmalerei/album/slides/willst_du_mit_mir_spielen.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/willst_du_mit_mir_spielen.jpg" width="160" height="200" alt=""/></a>
        </cite>
```


----------



## mrBrown (3. Apr 2018)

Alle bisher genannten Methoden funktionieren, wenn du etwas sorgfältiger arbeiten würdest. Grad mit einem passenden Editor ist das alles andere als Hexenwerk.


----------



## molebreaker (3. Apr 2018)

Dann zeige mir doch bitte, wie das geht, ich arbeite mit Dreamweaver, das ist doch wohl ein passender Editor.


----------



## mrBrown (3. Apr 2018)

Der Fehler war bisher entweder, dass du Tags nicht geschlossen hast: In Dreamweaver bekommst du zu jedem Tag auch den entsprechenden schließenden tag angezeigt. Außerdem solltest du das einfach passend einrücken (jeder Tag in einer neuen Zeile, nach einem öffnenden wird alles weiter eingerückt, nach einem schließenden wieder weniger weit).

Der andere Fehler waren fehlende Anführungszeichen, das sollte in Dreamweaver durch farbliche Hervorhebungen direkt sichtbar sein.


----------



## molebreaker (3. Apr 2018)

Mein Code sieht nun so aus:

```
<div class="tooltip">
  <span class="tooltiptext">zur größeren Ansicht</span>

           <img src="Malerei/Acrylmalerei/album/thumbs_web/eis.jpg" width="200" height="166" alt=""onmouseover="Tip('zur größeren Ansicht')" onmouseout="UnTip()"/></div>
   
   <div>
```
es hat sich nichts geändert, außerdem wird mir in DW nichts von fehlenden Anführungszeichen angezeigt.


----------



## mrBrown (3. Apr 2018)

In *dem* Code fehlen ja auch keine Anführungszeichen...


```
<div class="tooltip">
  <span class="tooltiptext">zur größeren Ansicht</span>
  <img src="Malerei/Acrylmalerei/album/thumbs_web/eis.jpg" width="200" height="166" alt=""onmouseover="Tip('zur größeren Ansicht')" onmouseout="UnTip()"/>
</div>
<div>
```

Wozu gehört denn das öffnende div da unten?


----------



## molebreaker (3. Apr 2018)

mrBrown hat gesagt.:


> Wozu gehört denn das öffnende div da unten?


Das war noch nicht gelöscht, aber auch nach dem Löschen hat sich nichts geändert.


----------



## mrBrown (3. Apr 2018)

Und was ist das Problem mit dem Code?


----------



## molebreaker (3. Apr 2018)

mrBrown hat gesagt.:


> Und was ist das Problem mit dem Code?


Siehe #33


----------



## mrBrown (3. Apr 2018)

Also, wenn du irgendwo drüber gehst, werden *alle* Tooltipps angezeigt?


----------

