zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Text-Hover

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 15.11.2010, 23:06
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.05.2010
Beiträge: 9
VKarts befindet sich auf einem aufstrebenden Ast
Standard Text-Hover

Hallo,

ich erstelle gerade eine kleine Website, die einer Freundin dienen soll, um in ihrem Studium das Thema Social Networks zu präsentieren.
Nun sollen für alle Bilder Quellenangaben dabei sein. Ich möchte die Website ungern verunstalten indem ich unter jedes Bild die Quelle schreibe.

Kann man mit Hilfe von CSS umsetzen, dass man mit der Maus über ein Bild geht und dann so etwas wie ein "Quicktipp" erscheint, der die Quelle (URL) anzeigt?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 16.11.2010, 13:28
Benutzerbild von siliciumcarbid
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.10.2010
Ort: Basel
Beiträge: 115
siliciumcarbid befindet sich auf einem aufstrebenden Ast
Standard

kann man tatsächlich, ja. Obwohl dazu gesagt werden muss, dass das nicht üblich ist. und im IE6 wird das noch nicht unterstützt:

HTML-Code:
<div class="img_wrap">
   <img src="...." />
   <div class="img_tooltip">das ist meine Quelle</div>
</div>
im CSS:
Code:
.img_wrap {
  position: relative;
}

.img_tooltip {
  display: none;
  width: (breite des Bildes);
  height: (höhe des Bidles);
  position: absolute;
}

.img_tooltip:hover {
  display: block;
}
aber warum machst du keinen alternativtext? Wäre doch einfacher...
nun kannst du die box "img_tooltip" jedenfalls stylen wie du willst.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 16.11.2010, 15:09
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.05.2010
Beiträge: 9
VKarts befindet sich auf einem aufstrebenden Ast
Standard

Hmm na ja den Alternativtext sieht man doch nur, wenn das Bild nicht angezeigt werden kann oder?
Die Website wird ja präsentiert und wenn man über ein Bild geht sollte die Quelle erscheinen, ich weiß dass es total einfach geht in anderen Webeditoren.
Es sei denn du hast einen Tipp wie man das mit Dreamweaver CS3 einfacher hinbekommt?
Mit Zitat antworten
  #4 (permalink)  
Alt 16.11.2010, 16:20
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.05.2010
Beiträge: 9
VKarts befindet sich auf einem aufstrebenden Ast
Standard

Ok super, dann sollte das ja bereits die Lösung meines Problems sein, probier ich heut gleich aus.

DANKE!
Mit Zitat antworten
  #5 (permalink)  
Alt 16.11.2010, 19:22
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.05.2010
Beiträge: 9
VKarts befindet sich auf einem aufstrebenden Ast
Standard

Hm funktioniert leider nicht, ich hab folgenden Code benutzt:

<tr>
<td colspan="3">
<img src="pictures/screen_head.jpg" alt="Quelle" width="725" height="120" /></td>
</tr>

Muss dazu sagen, dass sich das Bild in einer Tabellenzelle befindet. Sollte aber keine Rolle spielen oder?

Jedenfalls tut sich nix wenn ich mit der Maus über das Bild fahre.
Mit Zitat antworten
  #6 (permalink)  
Alt 16.11.2010, 20:10
Benutzerbild von ArcVieh
//
XHTMLforum-Kenner
 
Registriert seit: 19.12.2006
Ort: Gütersloh
Beiträge: 1.844
ArcVieh sorgt für eine eindrucksvolle AtmosphäreArcVieh sorgt für eine eindrucksvolle Atmosphäre
Standard

In deinem Fall gehören Bilder in keine Tabelle.
Es sei denn Du ziehst dir gerne Socken über die Ohren und trägst deine Schuhe als Handschuhe. Dann kannst Du das natürlich machen.

Bild-Beschreibungen oder Quellenangaben würde ich so auszeichnen:

HTML-Code:
<div class="caption">
   <img src="url" width="x" height="y" alt="Hello World"/>
   <p>Description / <a href="url">Quelle</a></p>
</div>
Code:
.caption p {
   display:none;
}
.caption:hover p {
   display:block;
}
Das ist aber nur die Funktion - je nach dem wo die Bilder positioniert sind, wird der Content springen und das div wird so auch die volle Breite ausnutzen, das musst Du natürlich anpassen.
__________________
CSS-FAQ beantwortet die meisten Fragen | Retro coding gegen Divitis | Code validieren & posten für Hilfe
Mit Zitat antworten
  #7 (permalink)  
Alt 16.11.2010, 21:36
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.05.2010
Beiträge: 9
VKarts befindet sich auf einem aufstrebenden Ast
Standard

Na ja die Tabellensache ist erst mal nebensächlich. Hab den Fehler erkannt. Das alt-Attribut funktioniert nur im IE. Ich benutze aber Safari und Firefox. Mit title= funktioniert es nun endlich.
Mit Zitat antworten
  #8 (permalink)  
Alt 16.11.2010, 21:45
Benutzerbild von ArcVieh
//
XHTMLforum-Kenner
 
Registriert seit: 19.12.2006
Ort: Gütersloh
Beiträge: 1.844
ArcVieh sorgt für eine eindrucksvolle AtmosphäreArcVieh sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von VKarts Beitrag anzeigen
Na ja die Tabellensache ist erst mal nebensächlich. Hab den Fehler erkannt. Das alt-Attribut funktioniert nur im IE. Ich benutze aber Safari und Firefox. Mit title= funktioniert es nun endlich.
Natürlich geht "alt" nur im IE mit hover-Effekt -- weil das nämlich falsch ist.
Aber es ging hier doch um eine :hover-Lösung?

Das mit der Tabelle empfinde ich nicht als nebensächlich.
__________________
CSS-FAQ beantwortet die meisten Fragen | Retro coding gegen Divitis | Code validieren & posten für Hilfe
Mit Zitat antworten
  #9 (permalink)  
Alt 17.11.2010, 17:52
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.05.2010
Beiträge: 9
VKarts befindet sich auf einem aufstrebenden Ast
Standard

Doch, ist nebensächlich, ist nämlich ein Gerüst zum Probieren, dass nicht von mir stammt.
Jepp ichw eiß, der IE benutzt das alt- Attribut als etwas, dass es gar nicht ist.
Nun es muss kein perfektes "Hover" sein, ist echt nur ne kleine Seite zum Präsentieren, da reicht mir das title- Attribut völlig!
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Wrapper wächst nicht mit, keine Floats maclady CSS 11 10.02.2010 18:30
Wachsende Container Andy CD CSS 13 10.02.2010 14:08
DIV bis GANZ unten burnZ CSS 5 27.07.2008 14:14
Helft mir. Ich habe voll die Leseschwäche nick CSS 12 15.01.2008 21:52
Problem mit div und Höhe deep4 CSS 2 13.11.2007 21:03


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:36 Uhr.