Mouse over rel="prettyPhoto" für einen Link zu einer Seite

[Horst]

Hi,

erst mal gesundes und erfolgreiches neues Jahr an das Team hier!

Ich habe eine Frage. Ich möchte den superschönen Mouse-Over Effekt bei den Bildern benutzen (rel=”prettyPhoto”) für ein Bild, dass auf eine andere Webseite verweist, also nicht auf das Bild selbst. Hat da jemand einen Tip?

LG

Horst

[7Theme Support]

Hallo Horst,

danke, dir auch ein gesundes, glückliches und erfolgreiches neues Jahr!

Also eigentlich müsste das ganz einfach gehen, probier mal folgenden Code:

<a href='http://bartsblackboard.com/files/2012/03/I-will-not-replace-a-candy-heart-with-a-frogs-heart.png' rel='prettyPhoto'><img src='http://bartsblackboard.com/files/2012/03/I-will-not-replace-a-candy-heart-with-a-frogs-heart.png' alt='Bart Simposn' /></a>

Eigentlich sollte das so funktionieren. Kommt noch ein bisschen auf das Theme an welches du verwendest, irgendwann konnten wir >> rel=’prettyPhoto’ << nicht mehr verwenden weil der W3C Validator das immer als Fehler angezeigt hat, aber ich denke wenn du das mit rel='prettyPhoto' im Quelltext gefunden hast wurde das wohl im Theme verwendet welches du benutzt.

[Horst]

Hi,

danke für die Anwort. Ich habe mich vielleicht etwas unverständlich ausgedrückt.

Ich möchte ein Bild mit dem Mouse Over Effekt versehen mit rel=”prettyPhoto” das geht ja auch ganz gut. Nur möchte ich, dass man bei dem Klick auf das Bild nicht das Bild vergrößert angezeigt bekommt sondern das Bild verlinkt auf eine andere Seite (die sich dann anstelle des vergrößerten Bild öffnet, verstehst du?

LG

Horst

[7Theme Support]

Ah, oh, jetzt weiß ich was du meinst, es geht nur um den “mouse over” effect. Kannst du mir noch kurz sagen welches Theme du benutzt, dann suche ich dir schnell ne Lösung

[Horst]

Achso, sorry 🙂

ich dachte es ist für alles Themes das gleiche.

Es betrifft das Londra Theme.

LG

Horst

[7Theme Support]

Hallo Horst,

das habe ich befürchtet, genau bei diesem Theme sind einige Divs die das Bild umschließen für die Animation zuständig. Du meinst ja das Portfolio oder?

[Horst]

Hallo,

nein, ich meine eigentlich wenn ich über die Mediathek ein ganz normales Bild eingebe. Dann hat es zunächst den schönen prettyPhoto effekt mit dem ausblenden bei MouseOver.

Ich habe eine Seite mit interessanten Links, dort ist die Beschreibung der Seite als Text und nebendran ein Screenshoot von der Webseite. Und dieser Screenshoot soll den effekt haben aber aud die Webseite bei Klick verweisen und nicht das Bild in groß öffnen.

Wenn ich dann dieses Bild verwenden will (es also verlinke) um auf eine andere Seite zu verweisen dann ist der effekt verschwunden.

LG

Horst

[7Theme Support]

Ok, Gott sei dank nicht der Effekt vom Portfolio, für die einzelnen Bilder haben wir ne Lösung. Geh mal in WordPress admin -> Appearance -> Theme Options -> General -> Extra CSS Content und füge das hinzu:

a img  {
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
}

a img:hover
{
	opacity:0.1;
}

Mit CSS3 können wir den Effekt ganz einfach nachbauen. Der Effekt in dem Theme wurde damals mit Javascript gemacht, deswegen brauchen wir den CSS Trick dafür…

[Horst]

KLASSe !!!!

Vielen Dank!!!!

[7Theme Support]

Gerne! 🙂

[Author]

Posts