zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Mouseover Bild zentriert anzeigen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 06.01.2013, 12:48
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.01.2013
Beiträge: 4
Invincible befindet sich auf einem aufstrebenden Ast
Standard Mouseover Bild zentriert anzeigen

Mouseover Bild zentriert anzeigen

Ich möchte im Rahmen einer Kundenbefragung, die mit der Spezialsoftware Sawtooth für Conjoint-Analysen erstellt ist, Bilder beim Mouseover über Text anzeigen, um bestimmte Sachverhalte genauer zu erklären.
Mit dem folgenden Code hat bisher auch alles gut geklappt.


Code:
<span class="tool_tip_link">Text</span>

<div class="tool_tip_text">
<p><strong>Text</strong></br>Text</p>
<img src="[%GraphicsPath()%]pic1.jpg" alt="" border="0">

</div>
Nun benötige ich allerdings einen CSS Code, um die Bilder + Texterklärung relativ weit oben und zentriert anzuzeigen, damit die Bilddateien im sichtbaren Teil des Browsers komplett zu sehen sind. Für das Bild habe ich es bereits mit position:fixed unter Angabe der Wunschposition geschafft - nur für den Rest funktioniert es nicht.

Eine Entschuldigung vornweg, falls diese Frage zu banal für das Forum ist, aber ich habe mich als Programmier-Neuling nun schon seit Tagen durch etliche Foren gelesen, vieles allein auf die Beine gestellt, muss aber diese Spezialproblem einmal gesondert anfragen.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 06.01.2013, 16:37
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 12.11.2010
Ort: Bad Langensalza
Beiträge: 733
gabischatz ist in Verruf geraten
Standard

So könnte es aussehen, wenn ich dich richtig verstanden habe.
HTML-Code:
<style>
 div.tool_tip_text{
  position: fixed;
  /* border: 1px solid #333;
  padding: 5px; */
  top: 10px;
  left: 100px;
 }
 div.tool_tip_text > p{
  text-align: center;
 }
 div.tool_tip_text img{
 /* border: 2px solid #333; */
  width: 100px;
  height: 100px;
 }
</style>

<span class="tool_tip_link">Text0</span>

<div class="tool_tip_text">
<p><strong>Text1</strong><br />Text2</p>
<img src="[%GraphicsPath()%]pic1.jpg" alt="Bild" />
</div>
Du musst aber aufpassen, dass du die Tags richtig schreibst. (</br>)<-falsch
Border sollte auch per css vergeben werden
MfG
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 07.01.2013, 11:05
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.01.2013
Beiträge: 4
Invincible befindet sich auf einem aufstrebenden Ast
Standard Problem leider noch nicht gelöst.

@ gabischatz: Vielen Dank für deine Mühe.

Leider funktioniert es noch nicht richtig. Und leider habe ich noch keine Ahnung, woran es liegt.

Die Bildgröße würde ich nicht per CSS vergeben wollen, da die angezeigten Bilder unterschiedliche Größen haben müssen. (Nur als Hintergrund-Info: Es werden Screenshots von Startseiten angezeigt, welche wegen der Erkennbarkeit auch ziemlich groß sein müssen. Daher habe ich ohne Zentrierung bzw. Fixierung im oberen Bereich des Browsers das Problem, dass ein Teil abgeschnitten wird.)

Weiterhin würde ich auch auf den Text verzichten und diesen direkt als Erklärung im Screenshot verarbeiten. Damit möchte ich die Problematik etwas vereinfachen, da ich dann nur noch mit dem Bild hantieren muss.

Könntest du mir diesbezüglich noch helfen? Hast du eine Idee, wie der Code dann aussehen müsste?

Danke für die Hilfe. Das bereitet mir schlaflose Nächte. Das passiert, wenn man Leute mit minimalen Programmierkenntnissen auf so ein Masterarbeitsthema loslässt.
Mit Zitat antworten
  #4 (permalink)  
Alt 07.01.2013, 13:37
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 12.11.2010
Ort: Bad Langensalza
Beiträge: 733
gabischatz ist in Verruf geraten
Standard

Kannst du mir mal deine Seite sagen, das man sich das anschauen kann?
Mit Zitat antworten
  #5 (permalink)  
Alt 07.01.2013, 18:04
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.01.2013
Beiträge: 4
Invincible befindet sich auf einem aufstrebenden Ast
Standard

Das ist das Problem, was es so kompliziert macht.
Der Code wird an den entsprechenden Stellen im Programm SSI Web (Sawtooth) eingegeben. Dieses generiert dann für jeden Umfrageteilnehmer unterschiedliche Html-Seiten. Derzeit liegt das Projekt auch noch nicht auf dem Server, ist also noch nicht online verfügbar.

Wenn es nur darum geht, es sich besser vorzustellen, kann ich auch Screenshots schicken, würde das aber ungern hier in einem Post tun.
Mit Zitat antworten
  #6 (permalink)  
Alt 07.01.2013, 19:48
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 12.11.2010
Ort: Bad Langensalza
Beiträge: 733
gabischatz ist in Verruf geraten
Standard

Screenshots und Ausgabe-Code, bin aber die nächsten zwei Wochen im Urlaub.
Mit Zitat antworten
  #7 (permalink)  
Alt 08.01.2013, 13:39
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.01.2013
Beiträge: 4
Invincible befindet sich auf einem aufstrebenden Ast
Standard

Dann wünsch ich dir einen schönen Urlaub.
Ich denke, ich muss mich dann anders behelfen, da ich maximal noch diese Woche Zeit habe zur Lösung des Problems.

Dennoch danke für die Mühe.
Mit Zitat antworten
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
Mouseover -wie kann ich ein Bild verändern wenn ich mit der Maus über ein Wort fahre? hrhr87 (X)HTML 3 16.03.2010 11:47
Bild zentriert in DIV-Bereich muetzenman CSS 4 19.05.2009 16:37
Mouseover Bild Zentrieren superwasi CSS 4 13.07.2008 20:45
bild statisch anzeigen lassen playaz CSS 3 01.12.2006 11:59
text zentriert über bild problem clory CSS 7 07.03.2005 11:37


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