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.
 
Thallius

Thallius

Top Contributor
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
 
M

molebreaker

Mitglied
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
M

molebreaker

Mitglied
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>
 
mrBrown

mrBrown

Super-Moderator
Mitarbeiter
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...
 
M

molebreaker

Mitglied
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
M

molebreaker

Mitglied
  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>
 
M

molebreaker

Mitglied
  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>
 
M

molebreaker

Mitglied
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:
 
M

molebreaker

Mitglied
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:
M

molebreaker

Mitglied
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
krgewb

krgewb

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

molebreaker

Mitglied
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.
 
krgewb

krgewb

Top Contributor
Da steht etwas komplett anderes:
HTML: 
<script type="text/javascript" src="wz_tooltip.js"></script>
 
krgewb

krgewb

Top Contributor
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.
 
M

molebreaker

Mitglied
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?
 
mrBrown

mrBrown

Super-Moderator
Mitarbeiter
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
 
krgewb

krgewb

Top Contributor
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.
 
M

molebreaker

Mitglied
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>
 
mrBrown

mrBrown

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

mrBrown

Super-Moderator
Mitarbeiter
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.
 
M

molebreaker

Mitglied
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.
 
mrBrown

mrBrown

Super-Moderator
Mitarbeiter
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?
 


Schreibe deine Antwort... und nutze den </> Button, wenn du Code posten möchtest...
Ähnliche Java Themen
  Titel Forum Antworten Datum
AdrianBade Rechner für die Homepage HTML / CSS 6

Ähnliche Java Themen

Aktuelle Jobs

Neue Themen


Oben