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

M

molebreaker

Mitglied
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:"
Code: 
<a href="index.htm" onmouseover="Tip('Some text')" onmouseout="UnTip()">Homepage </a>
Bei mir ist anstelle von 'homepage' ein Bild.
 
Java ist kein Javascript 🙂

Du must diesen Teil

Code: 
onmouseover="Tip('Some text')" onmouseout="UnTip()

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

Code: 
<img src='...>

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

Gruß

Claus
 
Danke Thallus,
nun aber habe ich zwei Bilder nebeneiander
der code lautet:
Code: 
<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>
 

Anhänge

  • doppelt.PNG
    doppelt.PNG
    323,8 KB · Aufrufe: 50
Wo fehlen da Leerzeichen und Anführungszeichen. Ich kann nichts finden.🙁
Code: 
 <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>
 
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...
 
Jetzt habe ich das Problem mit den Bildern gelöst, aber dafür sind nun alle Texte (Titel, Angaben zum Bild) unterstrichen.
 

Anhänge

  • unterstrichen.PNG
    unterstrichen.PNG
    143,8 KB · Aufrufe: 47
  1. Code: 
    <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>
 
  1. Code: 
    <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>
 
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.
Code: 
<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>
Code:
 
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:
Code: 
<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>
 
Zuletzt bearbeitet:
Habs auch schon entdeckt und beseitigt. Weil Du mir soviel geholfen hast und weil Ostern ist, bekommst Du ein Osterei von mir
 

Anhänge

  • ostereier_01.gif
    ostereier_01.gif
    35,2 KB · Aufrufe: 37
Du kannst die Seite in Firefox öffnen und dann Rechtsklick -> Seitenquelltext anzeigen
Da werden Fehler in roter Schrift angezeigt.
 
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:
Code: 
 <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.
 
Da steht etwas komplett anderes:
HTML: 
<script type="text/javascript" src="wz_tooltip.js"></script>
 
molebreaker hat gesagt.:
Wo fehlen da Leerzeichen und Anführungszeichen. Ich kann nichts finden.🙁
Code: 
 <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>
Zum Vergrößern anklicken....
Du kannst hier im Forum bei den code-Tags spezifizieren, dass es sich um HTML handelt.
HTML: 
 <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.
 
HTML: 
<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?
 
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

HTML: 
<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
 
HTML: 
<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.
 
Da wurde nichts veschluckt, das ist ein tooltip der folgendermaßen eingebunden wird
HTML: 
<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>
 
Alle bisher genannten Methoden funktionieren, wenn du etwas sorgfältiger arbeiten würdest. Grad mit einem passenden Editor ist das alles andere als Hexenwerk.
 
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.
 
Mein Code sieht nun so aus:
HTML: 
<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.
 
In *dem* Code fehlen ja auch keine Anführungszeichen...

HTML: 
<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?
 

Aktuelle Jobs

Neue Themen

Ähnliche Themen

aus ObjectInputStream muß FileInputStream werden
Antworten: 12
Es werden keine Daten mehr in die Tabelle eingefügt
Antworten: 4
JTree - pro Knoten kann nur ein Blatt eingefügt werden
Antworten: 5
Daten werden nicht in die Tabelle eingefügt
Antworten: 7
JFrame erstellt; weitere Elemente werden nicht eingefügt/sind nicht zu sehen
Antworten: 4

Zurück
Oben