tutorials.de Buch-Aktion 02/2012
ERLEDIGT
NEIN
ANTWORTEN
7
ZUGRIFFE
1491
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 04.08.09 18:17 #1
    gnuisnotunix gnuisnotunix ist offline Mitglied Silber
    Registriert seit
    Aug 2008
    Beiträge
    50
    Hi zusammen,

    ich möchte folgendes berwerkstelligen:

    Ich habe 2 nebeneinander liegende Div Boxen. In der linken ist lediglich Fließtext, welcher jedoch 2,3 Links enthält. Überfährt ein Besucher einer dieser Links, soll im rechten Container ein Bild angezeigt werden.

    Bei Link A soll natürlich Bild A, bei Link B Bild B angezeigt werden usw.

    Ich hab leider keine Idee wie das funktionieren könnte. Mit JS will ichs nicht lösen.

    Hoffe ihr könnt mir helfen.

    Hier mal mein HTML Code:

    HTML-Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">

#fliesstext
	{
	width:300px;
	float:left;
	border:2px solid #000000;
	padding:5px;
	margin:5px;
	}
#bild
	{
	width:225px;
	height:120px;
	border:3px solid #FF0000;
	float:left;
	margin-top:40px;
	}
</style>
</head>

<body>
<div id="fliesstext">
Lorem Ipsum is simply dummy text of the printing and typesetting <a href="#nogo" class="linkA">industry</a>. Lorem Ipsum has been the industry's standard dummy 
text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived
not only five centuries, but also the leap into <a href="#nogo" class="linkB">electronic</a> typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of <a href="#nogo" class="linkC">Letraset</a> sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker 
</div>
<div id="bild">

</div>


</body>
</html>
    Geändert von gnuisnotunix (04.08.09 um 18:20 Uhr)
     
    Zitieren Zitieren
  2. 04.08.09 18:19 #2
    Maik Tutorials.de Gastzugang
    Hi.
    Zitat Zitat von gnuisnotunix Beitrag anzeigen
    Mit JS will ichs nicht lösen.
    Mit CSS ist es in dieser Konstellation technisch aber nicht möglich.

    Javascript basierte Bildergalerie dürfte dir hier weiterhelfen.

    mfg Maik
     
    Zitieren Zitieren
  3. 04.08.09 18:26 #3
    Avatar von queicherius
    queicherius queicherius ist offline ♥ PHP ♥
    Registriert seit
    Oct 2008
    Ort
    Stuttgart
    Beiträge
    436
    Zitat Zitat von Maik Beitrag anzeigen
    Hi.Mit CSS ist es in dieser Konstellation technisch aber nicht möglich.

    mfg Maik
    Geht das nicht so:

    Code css:
    1
2
3
4
5
6
7

    #navi1 a .showcase {
display: none;
}
 
#navi1 a:hover .showcase {
display: block;
}

    Dann musst du aber für jedes Bild eine eigenes Div erstellen und das mit "postition" an die richtige Stelle machen.
     
    Jeder freut sich über eine positive Bewertung oder ein Danke :)

    Wie poste ich falsch
    Nachdem ich Google, die FAQ und die interne Suche erfolgreich ignoriert habe, erstelle ich zwei bis fünf neue Themen in den falschen Unterforen, mit kreativen Titel und undeutlichem Text, unter dem sich jeder etwas anderes vorstellen kann. Helfende Posts anderer Mitglieder ignoriere ich einfach und nörgle, dass mir niemand helfen kann.
    Mein Motto
    Zitieren Zitieren
  4. 04.08.09 18:27 #4
    Maik Tutorials.de Gastzugang
    @queicherius: Grundsätzlich schon, aber schau dir bitte mal den HTML-Code an, wo sich der Link befindet, und wo das Bild angezeigt werden soll, und nenn mir mal dazu einen gebrauchsfähigen CSS-Selektor.

    Dein Selektor erwartet ein Nachfolgeelement innerhalb des Links.

    mfg Maik
     
    Zitieren Zitieren
  5. 04.08.09 18:42 #5
    gnuisnotunix gnuisnotunix ist offline Mitglied Silber
    Registriert seit
    Aug 2008
    Beiträge
    50
    Hallo zusammen,

    an der Struktur kann ich gerne noch etwas ändern, sollte dies den Einsatz von CSS ermöglichen, was mir deutlich lieber wäre...
     
    Zitieren Zitieren
  6. 04.08.09 18:51 #6
    Maik Tutorials.de Gastzugang
    Mit der richtigen Struktur funktioniert das so:
    Code :
    1

    <a href="#nogo" class="linkA">industry[b]<span><img src="pfad/zur/grafik.jpg"></span>[/b]</a>
    Code css:
    1
2
3

    a.linkA span { display:none; }
a.linkA:hover span { display:block; }
a span img { border:none; }

    Desweiteren hast du die Möglichkeit, das Bild an einer bestimmten Position anzuzeigen:
    Code css:
    1
2
3
4
5
6

    a.linkA span { 
display:none; 
position:absolute;
top:10px;
right:10px;
}

    mfg Maik
     
    Zitieren Zitieren
  7. 04.08.09 19:47 #7
    gnuisnotunix gnuisnotunix ist offline Mitglied Silber
    Registriert seit
    Aug 2008
    Beiträge
    50
    prima, das ist das was ich gesucht habe! Danke schonmal.

    Ein kleines Problem tut sich jetzt aber auf:

    Ich hab den rechten Container schon mit einem Bild vorausgestattet und auch mit einem Hintergundbild versehen. Wenn ich nun über einen Link fahre, wird das neu darzustellende Bild hinter den Container gesetzt. Es muss aber "vor" den Container.

    Geht das mit Z-Index? Wenn ja ts bei mir nicht bzw ich mache etwas falsch.

    @ MAIK vielen vielen Dank schonmal für deine Hifle!
     
    Zitieren Zitieren
  8. 04.08.09 19:51 #8
    Maik Tutorials.de Gastzugang
    Zitat Zitat von gnuisnotunix Beitrag anzeigen
    Geht das mit Z-Index? Wenn ja ts bei mir nicht bzw ich mache etwas falsch.
    Zeig mal bitte deinen aktuellen HTML- und CSS-Code.

    mfg Maik
     
    Zitieren Zitieren
« Problem mit dem Gestalten einer Box (valid xhtml und css) | Schrift an die jeweilige Auflösung anpassen »

Ähnliche Themen

  1. Hover miteinander Verbinden (Link Text & Link Bild)
    Von vodka im Forum Javascript & Ajax
    Antworten: 1
    Letzter Beitrag: 17.05.10, 13:20
  2. per Hover Bild anzeigen mit JQuery. Falsche Reihenfolge
    Von Jan-Frederik Stieler im Forum Javascript & Ajax
    Antworten: 4
    Letzter Beitrag: 14.03.10, 19:35
  3. bei URL:hover text anzeigen?
    Von Sway im Forum CSS
    Antworten: 2
    Letzter Beitrag: 25.07.05, 19:34
  4. Bei klick auf Bild (Link), soll sich das Bild in einem eigenen kleinen Fenster öffnen
    Von access-denied im Forum HTML & XHTML
    Antworten: 1
    Letzter Beitrag: 11.04.05, 17:22
  5. mouseover link soll bild anzeigen...?
    Von nitrobesim im Forum HTML & XHTML
    Antworten: 6
    Letzter Beitrag: 02.09.04, 23:02