[gelöst] Über Views deaktiviertes Bild bei Mousover anzeigen lassen?
Eingetragen von DrupNewb (68)am 09.12.2010 - 12:58 Uhr in
Hallöchen DC!
Folgende Frage stellt sich mir:
Ich habe in einem View den Inhaltstypen "Zeitschriften" ausgegeben, jedoch nur die Titel der Zeitschriften, welche ich auf ihre Beiträge verlinken lasse.
Das Bild/Logo zu der jeweiligen Zeitschrift, hab ich in der View mit drin, allerdings "von der Anzeigen ausgeschlossen".
Gibt es eine Möglichkeit über CSS dieses ausgeblendete Bild rechts neben dem Titel anzeigen zu lassen?
.viewZeitschriften a h2 {
color: white;
font-size: 14px;
margin: 4px 0 0 5px;
font-weight: bold;
line-height: 1.4;
width: 375px;
height: 20px;
border: solid 1px black;
padding: 6px;
background: #971C1F;
-moz-border-radius: 10px;
-khtml-border-radius:30px;
}
.viewZeitschriften a:hover h2 {
color: black;
background: #aaa;
margin-left: 20px;
}So sieht derweil der kleine CSS Abschnitt dazu aus.
Weihnachtliche Grüße
PS: Ich möchte die Seite frei von Flash und Java halten.
- Anmelden oder Registrieren um Kommentare zu schreiben
Ich brauche mehr Details
am 09.12.2010 - 15:01 Uhr
Um dir wirklich helfen zu können musst du genauer erklären was du machen möchtest. Ich brauche mehr Details (Zitat)
Ich habe es so verstanden, dass das Bild bei einem Mouseover statisch (also an einer fixen Stelle) nebendem Titel eingeblendet werden soll. Das geht mit CSS, allerdings müsstest du dazu noch das HTML Grundgerüst posten (also die komplette "row" des Views als HTML).
Alternativ geht das auch sehr stylisch mit einem jQuery Plugin qTip:
http://craigsworks.com/projects/qtip/demos/content/images
Mhm.
am 09.12.2010 - 15:12 Uhr
An sich hast du schon richtig verstanden was ich machen möchte.
Es gibt halt ne bestimmte Anzahl an Zeitschriften, die als Inhaltstyp Zeitschriften eingebunden sind, von denen ich aber nur den Titel anzeigen lasse.
Der Titel verlinkt logischerweise auf den Inhalt, also auf die jeweilige Zeitschrift.
Zu jeder Zeitschrift habe ich auch ein Cover von der Zeitschrift über ein CCK Feld mit hochgeladen.
Das Bild hab ich in der View für die Zeitschriften auch mit ausgewählt, allerdings den Haken bei "Von der Anzeige ausschließen" gemacht.
Sobald man mit der Maus über den Titel fährt, soll quasi rechts neben dem Titel das Cover/Bild angezeigt werden, an einer festen Position.
Ich bin mir grad nich sicher was genau ich dir posten soll.
In welcher Datei steht das geschrieben, was du sehen willst? In der views.css?
Weihnachtliche Grüße
Das steht im Quelltext bei
am 09.12.2010 - 15:39 Uhr
Das steht im Quelltext bei der Anzeige. Aber ich versuchs mal ohne:
<div class="views-row oder-irgend-eine-klasse"><a href="">Zeitschrift Titel</a>
<div class="image"><img src="cover.jpg" /></div>
</div>
Wichtig ist dass das Eltern-Element (der Zeile = row) das Attribut position:relative; bekommt. Alles zusammen als Beispiel:
.views-row {
position:relative;
}
.image {
display:none;
position:absoulte;
top:0;
left: -100px;
}
.views-row:hover .image {
display:block;
}
Das letzte funktioniert aber nicht in allen Browsern denn :hover geht in manchen Browsern nur für links.
Alternative wäre das über jQuery zu lösen, das ersetzt die Funktionalität der letzten Zeile im obigen CSS und funktioniert in allen Browsern
$('.views-row').mouseover( function () {$('.image', this).show();
});
Also:
am 09.12.2010 - 16:04 Uhr
Was du da gepostet hast sieht ganz interessant aus, aber ich bin mir nicht ganz sicher, ob es mir dabei hilft, was ich vorhabe, denn:
- es sind ja mehrere verschiedene Zeitschriften -> d.h. nach deinem Beispiel müsste ich für jede von den Zeitschriften sowas anlegen(?)
- das Bild/Cover der Zeitschriften ändert sich alle 2 Wochen - 2 Monate (hätte ich wohl noch dazu schreiben sollen ... 'tschuldigung )
Ich suche nach einer Lösung, die automatisch das bereits hochgeladene Bild der Zeitschrift (es sind 5 versch. Zeitschrift -> somit existieren auch 5 verschiedene Bilder) rechts neben dem Titel ausgibt, wenn man mit der Maus drüber fährt.
Das Bild zu der Zeitschrift ist ja bereits hochgeladen, allerdings über Views ausgeblendet.
Dennoch vielen Dank für deine Hilfsbereitschaft!
Ich habe auch schon mehrere Stunden mit der Suche über gewisse Suchmaschinen verbracht und schlussfolgere daraus, dass mein Anliegen entweder gar nicht so realisierbar ist, wie ich es mir erhoffte oder mit einem wirklich großen Arbeitsaufwand + Know-How verknüpft ist.
Wie gesagt, kein Problem wenn
am 09.12.2010 - 16:15 Uhr
Wie gesagt, kein Problem wenn man den Code kennen würde :) Es ist egal wie häufig sich die Zeitschrift ändert. Den view kann man ja entsprechend anpassen. Den Code musst du auf jeden Fall nur einmal angeben.
Leider hab ich weiterhin
am 09.12.2010 - 17:00 Uhr
Leider hab ich weiterhin absolut keine Ahnung, was genau ich dir posten soll. S:
Moment!
Ich glaub ich hab grade ne Idee!
*Edit: Hab das Problem gelöst.
Habs jetzt so hinbekommen, wie ich wollte.
Das Problem war, dass ich in der View das Bild schon ausgeblendet habe, somit konnte ich das gar nich so umsetzen, wie du mir das als Beispiel gegeben hast.
Hab das Bild jetzt in Views aktiviert und so ähnlich dein Beispiel übernommen.
So funzt das ..
Danke!
Bitte :) Du hättest auch das
am 09.12.2010 - 17:03 Uhr
Bitte :)
Du hättest auch das Feld mit dem Titel so umschreiben können (im views interface) dass das Bild innerhalb des Titels (mit dem Link) angezeigt wird. Damit umgehst du das Problem, dass :hover browserübergreifend nur auf Links funktioniert.
derjochenmeyer@drupal.org
am 09.12.2010 - 17:58 Uhr
Bitte :)
Du hättest auch das Feld mit dem Titel so umschreiben können (im views interface) dass das Bild innerhalb des Titels (mit dem Link) angezeigt wird. Damit umgehst du das Problem, dass :hover browserübergreifend nur auf Links funktioniert.
Interessant! Ich glaub das schau ich mir morgen nochmal genauer an.
Heute ist erstmal Schluss! q:
Weihnachtliche Grüße
!