Text vom Teaser bei mouseover?

Holger71

Hallo allerseits,

bei mir wird auf der Startseite von w3projekt.com von jeder Kategorie der jeweils zuletzt geschriebene Artikel je Kategorie als Teaser angezeigt und rechts daneben dann je 5 folgende Artikel der selben kategorie.

Ist es realisierbar, das bei Mouseover über die Überschriften der Artikel der Text des Teasers angezeigt wird, also wie eine Vorschau?

Beste Grüße, Holger

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Monika

öffne das template wo das drin steht,

suche dort die Links und innerhalb dessen nach dem title Attribut

das muß dann so aussehen

PHP

title="<?php echo get_the_excerpt();?>"

also

PHP

<a href=".....irgendwas mit permalink" title="<?php echo get_the_excerpt();?>">irgendwas mit title</a>

;)

lg

Gersprenz

Zitat von Monika
öffne das template wo das drin steht,
suche dort die Links und innerhalb dessen nach dem title Attribut
das muß dann so aussehen
PHP
title="<?php echo get_the_excerpt();?>"
also
PHP
<a href=".....irgendwas mit permalink" title="<?php echo get_the_excerpt();?>">irgendwas mit title</a>
;)

lg
Alles anzeigen

Hmm, kennst du auch eine Methode, mittels Mouseover ein oder zwei anklickabre Links im aufklappenden title=" Text und Link und noch ein Text und Link" einzubauen?

Monika

nein, fälllt mir derzeit nichts ein,

doch wozu sollt dies gut sein ?

lg

marX

Sowas kann man mit JavaScript lösen. Eine Möglichkeit ist diese hier, basierend auf Prototype:
Ajaxian » Prototype based JavaScript tooltip

Monika: Da würden mir schon Anwendungsfälle einfallen. Nicht unbedingt mit Links, aber strukturiertere (HTML-)Inhalte beim MouseOver. ;-)

Monika

Zitat von marX

Sowas kann man mit JavaScript lösen. Eine Möglichkeit ist diese hier, basierend auf Prototype:
Ajaxian » Prototype based JavaScript tooltip

Monika: Da würden mir schon Anwendungsfälle einfallen. Nicht unbedingt mit Links, aber strukturiertere (HTML-)Inhalte beim MouseOver. ;-)

ja ich weiß, ich glaube ich mag das nicht, weil ichs nicht mag, ich mag kurze INFo was mich beim Link erwartet, aber keine Romane oder gar Werbung --da klick ich meist die ganze Webseite weg.

lg

marX

Ja ich normal auch nicht. Ein sinnvoller Einsatz ist aber z.B. der auf der Demo-Seite erwähnte Kalender:
Ansicht: Terminüberschrift
MouseOver: Termindetails
OnClick: Termin editieren

Mit nem "normalen" Blog hat das natürlich wenig zu tun, aber wenn man ein wenig mit dem Design spielen möchte, warum nicht? :-)

PS: Was mich persönlich an der Prototype-Lösung stört, ist, das nicht das normale title-Attribut verwendet wird. So sieht man ohne JS einfach mal gar nichts. MooTips macht das IMHO besser, ist aber nicht so flexibel.

Gersprenz

Ich arbeite gerade an einer angepassten Version des photo-dropper plugins, der mir sehr gut gefällt um komfortabel flickr Bilder mit Credit und Namen einzubauen.

Weil mich die vollständige Anzeige von Fotograf und Name stört bei kleinen Bildformaten (ragt über, zerschiesst Design), wollte ich nur das cc Zeichen im Bild anzeigen, und wenn dann Mouseover noch den Text: Fotograf: Name, wobei der Name der Link zu flickr sein sollte.
Ähnlich wie bei Spreeblick eben - schaut mal da.
Ich dachte mir schon dass das nur mit Javascript ö.ä. geht.

>>"PS: Was mich persönlich an der Prototype-Lösung stört, ist, das nicht das normale title-Attribut verwendet wird. So sieht man ohne JS einfach mal gar nichts. MooTips macht das IMHO besser, ist aber nicht so flexibel."
Mit mootools (meinst du die?) klappt aber bei mir nur die dynamische Anzeige des ersten (angepassten) Mouseover/Mouseenter Elements. Alle anderen klappen nicht aus.

marX

Zitat von Gersprenz

Mit mootools (meinst du die?) klappt aber bei mir nur die dynamische Anzeige des ersten (angepassten) Mouseover/Mouseenter Elements. Alle anderen klappen nicht aus.

Die Tips, die auf MooTools basieren, und die ich oben verlinkt hab, ja.

Sollte eigentlich problemlos funktionieren, wenn du den Code so wie angegeben einbaust. URL der Problemseite?

Holger71

MooTips wäre ja eine sehr viel schickere Lösung für mouseover aber irgendwie fuktioniert das bei mir nicht :confused:

in der header.php des Themes habe ich eingefügt:

Code

<script type="text/javascript">
		window.addEvent('domready', function(){
			/* Tips 1 */
			var Tips1 = new Tips($$('.Tips1'));
			
			/* Tips 2 */
			var Tips2 = new Tips($$('.Tips2'), {
				initialize:function(){
					this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);
				},
				onShow: function(toolTip) {
					this.fx.start(1);
				},
				onHide: function(toolTip) {
					this.fx.start(0);
				}
			});
			
			/* Tips 3 */
			var Tips3 = new Tips($$('.Tips3'), {
				showDelay: 400,
				hideDelay: 400,
				fixed: true
			});
			
			/* Tips 4 */
			var Tips4 = new Tips($$('.Tips4'), {
				className: 'custom'
			});
		}); 
	</script>

Alles anzeigen

und in der CSS

Code

.tool-tip {
	color: #fff;
	width: 139px;
	z-index: 13000;
}
 
.tool-title {
	font-weight: bold;
	font-size: 11px;
	margin: 0;
	color: #9FD4FF;
	padding: 8px 8px 4px;
	background: url(bubble.png) top left;
}
 
.tool-text {
	font-size: 11px;
	padding: 4px 8px 8px;
	background: url(bubble.png) bottom right;
}
 
.custom-tip {
	color: #000;
	width: 130px;
	z-index: 13000;
}
 
.custom-title {
	font-weight: bold;
	font-size: 11px;
	margin: 0;
	color: #3E4F14;
	padding: 8px 8px 4px;
	background: #C3DF7D;
	border-bottom: 1px solid #B5CF74;
}
 
.custom-text {
	font-size: 11px;
	padding: 4px 8px 8px;


	background: #CFDFA7;
}

Alles anzeigen

dann abschließend in der Datei welche die Tabs auf meiner Startseite ausgibt:

PHP

<a class="Tips2" href="<?php the_permalink(); ?>" title="<?php echo get_the_excerpt();?>"><?php the_title(); ?></a>

Der Text vom Teaser wird nun zwar bei mouseover ausgegeben aber nicht so formatiert wie es laut der Demo sein soll.... weiß jemand Rat was da geändert werden muss?

Gruß Holger

marX

Auf welcher Seite hast du die Tips eingebunden?
Hier seh ich keine Tips.

codestyling

Das kann man auch alles nur mit puren CSS realisieren, wie Stu Nicholls es hier als Demo zeigt: Stu Nicholls | CSSplay | Tooltips on inline links

marX

codestyling: Das Beispiel dort sieht bei mir nicht wirklich toll aus. Die Tooltips gehen meist irgendwo auf, nur nicht an dem Link selbst. Außer man scrollt nicht, dann gehts. ;-) (Opera 9.51/Win)

[SIZE="1"]In den anderen Browsern die ich hier zur Verfügung hab gehts aber.[/SIZE]

codestyling

Zitat von marX

codestyling: Das Beispiel dort sieht bei mir nicht wirklich toll aus. Die Tooltips gehen meist irgendwo auf, nur nicht an dem Link selbst. Außer man scrollt nicht, dann gehts. ;-) (Opera 9.51/Win)
[size=8]In den anderen Browsern die ich hier zur Verfügung hab gehts aber.[/SIZE]

Wie der Autor schon schreibt in der Erklärung zum Stylesheet:

Zitat

Like a lot of simple demonstrations there is always one browser that cannot get it right, and this time it is Opera. The :hover does not display correctly, but when the link is clicked it shows correctly.
Perhaps the next release of Opera can rectify this 'bug'.

Man sollte das vielleicht auch mal Opera melden, denn seit 2007 und unzähligen Opera Versionen ist dieser Browser immer noch nicht in der Lage, dies korrekt darzustellen.

Info: hab ich als bug-347503 bei Opera mal gemeldet.

marX

Mmh merkwürdig. Na okay. Hatte jetzt keine Lust mir das alles durchzulesen. ;-) Mal schauen was Opera dazu sagt.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Text vom Teaser bei mouseover?

Jetzt mitmachen!