ein Mouseover selber bauen - mit links ;-)

gibraltar
Autor
Neues Mitglied

Mehr

16 Juli 2013 23:36 - 18 Juli 2013 09:11 #37237 von gibraltar

ein Mouseover selber bauen - mit links ;-) wurde erstellt von gibraltar

Halli hallo Joomla-Freunde in der Schweiz,

wollte schon immer mal einen Mouse-Over-Effekt selber machen.

ich bin soeben dabei ein paar spezielle Effekte auf der Seite www.maedchenhaus.org hinzubekommen - insbesondere wenn man auf den linken Block blickt die dj-image-gallery
Nebenbei - ich find die Gallery echt super! Die leistet total viel.

will jetzt aber noch groessere Bilder sichtbar machen - mit mouseover. Geht das denn!?

Denke ja: Es müsste mit Tooltips gehen.

hier gibt es nebenbei auch noch ein paar do-it-yourself-methoden

www.dynamicdrive.com/dynamicindex4/imagetooltip.htm or www.dyn-web.com/code/tooltips/

But I would look into some joomla extensions.
extensions.joomla.org/extensions/photos-...articles-images/6245
extensions.joomla.org/extensions/photos-...articles-images/6105

Es gibt aber noch einen weiteren Weg: www.codepen.io/jdwires/pen/skpby
Das ist ein echtes Superbeispiel - wie ich finde!

man kann ein thumbnail u. ein gr. image auf einer Seite direkt nebeneinander bringen
die beiden Bilder in einem Link verbinden
den link einbauen
grossen Stil dem grossen image zufügen..

Code:

<a class="mouseover-thumbnail-holder">
  <img src="http://placehold.it/150x150/ddf" alt="">
  <img class="large-thumbnail-style" src="http://placehold.it/250x250/ddf" alt="">

</a> 
<a class="mouseover-thumbnail-holder">
  <img src="http://placehold.it/150x150/fdd" alt="">  
  <img class="large-thumbnail-style" src="http://placehold.it/250x250/fdd" alt="">

</a> 
<a class="mouseover-thumbnail-holder">
  <img src="http://placehold.it/150x150/dfd" alt="">
  <img class="large-thumbnail-style" src="http://placehold.it/250x250/dfd" alt="">
</a>

Code:

a.mouseover-thumbnail-holder {
  position:relative;
  display:block;
  float:left;
  margin-right:10px;
}
.large-thumbnail-style {
  display:block;
  border:10px solid #fff;
  box-shadow:0px 0px 5px #aaa;
}
a.mouseover-thumbnail-holder .large-thumbnail-style {
  position:absolute;
  top:0;
  left:-9999px;
  z-index:1;
  opacity: 0;
  transition: opacity .5s ease-in-out;
  -moz-transition: opacity .5s ease-in-out;
  -webkit-transition: opacity .5s ease-in-out;
}
a.mouseover-thumbnail-holder:hover .large-thumbnail-style {
  top:0;
  left:105%;
  z-index:1;
  opacity:1;
}

was meint ihr denn.

freu mich auf einen Tipp.

vg gibraltar

denk mal dass ich da eingreifen muss iin das layxout.css des template - und dann noch in einen html-file.

Code:

<ul id="slider37" style="position: relative; width: 400px;">
<li style="position: absolute; top: 0px; left: 0px; visibility: visible; opacity: 1;">
<img alt="g_one1" src="/images/stories/girls_one/m_vignette_hans-on-experience_4545166211_.jpg">
<div class="slide-desc">
</li>
<li style="position: absolute; top: 0px; left: 0px; visibility: hidden; opacity: 0;">
<li style="position: absolute; top: 0px; left: 0px; visibility: hidden; opacity: 0;">
<img alt="gone_3" src="/images/stories/girls_one/m_vignette_gamergirls_4585918045_.jpg">
<div class="slide-desc">

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Cryst
Offline
Neues Mitglied

Mehr

23 Juli 2013 18:01 #37272 von Cryst

Cryst antwortete auf ein Mouseover selber bauen - mit links ;-)

Hallo gibraltar

Nur damit ich dich richtig verstehe.
Du willst mit einem Mouseover deine Slideshow vergrössern?

Don’t take life as hard it is, because you are the one who can change it.
So, if something is impossible, use your imagination.

Ray L.

Folgende Benutzer bedankten sich: gibraltar

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

gibraltar
Autor
Neues Mitglied

Mehr

24 Juli 2013 00:05 - 24 Juli 2013 06:13 #37273 von gibraltar

gibraltar antwortete auf ein Mouseover selber bauen - mit links ;-)

hallo Ray - guten Abend

vielen Dank für deine Antwort. Super!!!!!

ja du hast Recht. Will gerne mit einem mouseover die bilder aus dem slider vergreoessern
Oder: wenn das nicht geht, dann würd ich einfach gerne ein oder zwei Bilder in dem rechten Seitenblock
drinne haben - die dann mit einem Mouseover vergroessert werden - so wie das hier gemacht ist

www.codepen.io/jdwires/pen/skpby

Das ist ein echtes Superbeispiel - wie ich finde!

Lässt sich das umsetzen?

Freu mich, von dir wieder zu hoeren.

Viele Greusse
Gibraltar

Update; für den zweiten Fall denke ich dass der Hack wie folgt geht.
ich aendere die folgenden Dateien:

+ Css:

templates/ja_purity_ii/layouts/blocks/head.php

+ Html:

templates/ja_purity_ii/layouts/blocks

in diese files einfach den code einbauen von oben...

Wie es mit dem dj-image-slider gehen sollte ist mir ehrlich gesagt nicht ganz klar....
hast du eine Ahnung?!

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Moderatoren: pascale, Tribal6, RePao, Dragonlord, Chris Hoefliger, adiheutschi.ch