Page 1 of 1
Bilderwechsel bei hover
Posted: Fri 20. Nov 2015, 13:59
by photojo
Hi,
seit Stunden versuche ich "verzweifelt" mit CP image spezial das Bild und das Vorschaubild beim Hovern auszutauschen. Im konkreten Fall ich ein nicht lachendes Gesicht durch eine lachendes austauschen.
<a href=#>
<img src={IMAGE} onmouseover=”src='{THUMB_REL}'” onmouseout=”src=’img/cmsimage.php/250x250x0/{IMAGE_HASH}.{IMAGE_EXT}'”></a>
Kann mir jemand helfen?
Re: Bilderwechsel bei hover
Posted: Fri 20. Nov 2015, 14:13
by nameless1
arbeite doch mit css :hover in dem template. kein js mist nötig
bspw.
Code: Select all
<div id="hover-change-{ID}"></div>
<!-- CSS:
.hover-change-{ID} {
background-image: url('pfad/zum/bild.jpg');
}
.hover-change-{ID}:hover {
background-image: url('pfad/zum/bild.jpg');
}
-->
Re: Bilderwechsel bei hover
Posted: Fri 20. Nov 2015, 14:26
by Oliver Georgi
etwas antiquierte Methode, alle Touchdevices quasi ausgeschlossen. Dringend Konzept überdenken. Und wenn nur CSS
Code: Select all
<figure class="image-hover" style="background-image:url(onhover.jpg);">
<img src="nothover.jpg" alt="">
</figure>
<style>
.image-hover {
/* whatever */
display: inline-block;
border: 1px solid black;
position: relative;
background: transparent no-repeat 0 0;
}
.image-hover > img {
display: inline-block;
border: 0;
}
.image-hover:hover > img,
.image-hover:focus > img {
opacity: 0;
}
</style>
Re: Bilderwechsel bei hover
Posted: Fri 20. Nov 2015, 14:27
by photojo
Danke erstmal.
Das mit CSS ist mir natürlich lieber, allerdings habe ich das Problem, im Template des CPs die korrekten Pfade gerendert zu bekommen.
CP Image spezial
...
Code: Select all
<!--IMAGE_SETTINGS_END//-->
<!--IMAGES_HEADER_START//-->
[TITLE]<h3>{TITLE}</h3>[/TITLE]
[SUBTITLE]<h4>{SUBTITLE}</h4>[/SUBTITLE]
[TEXT]{TEXT}[/TEXT]
<!-- CSS:
.hover-change-{ID} {
background-image: url {IMAGE};
}
.hover-change-{ID}:hover {
background-image: url('{THUMB}');
}
-->
<div class="images" id="images{ID}">
<!--IMAGES_HEADER_END//-->
<!--IMAGES_ENTRY_START//-->
<div id="hover-change-{ID} col-md-2" style="border: 3px solid red; height: 200px;"></div>
<!--ENTRY_DATA_START//-->
<li data-target="#images{ID}" data-slide-to="{ENTRY_ID}"[FIRST] class="active"[/FIRST]>
<a href="#img{IMGID}">Image {ENTRY_NUM}</a>
</li>
...
Bin ich da total am Holzweg?!
Re: Bilderwechsel bei hover
Posted: Fri 20. Nov 2015, 14:36
by photojo
Auch beo Olivers Methode komme ich einfach nicht dahinter, wie ich die Bilder, die ich in den CP gelegt habe, im Template anspreche?!
.
.
.
<div class="images" id="images{ID}">
<!--IMAGES_HEADER_END//-->
<!--IMAGES_ENTRY_START//-->
<figure class="image-hover" style="background-image:url(
{THUMB_REL});">
<img src="
{IMAGE}" alt="">
</figure>
<style>
.image-hover {
/* whatever */
display: inline-block;
border: 1px solid black;
position: relative;
background: transparent no-repeat 0 0;
}
.image-hover > img {
display: inline-block;
border: 0;
}
.image-hover:hover > img,
.image-hover:focus > img {
opacity(0);
}
</style>
<!--ENTRY_DATA_START//-->
<li data-target="#images{ID}" data-slide-to="{ENTRY_ID}"[FIRST] class="active"[/FIRST]>
<a h ....
.
.
.
Re: Bilderwechsel bei hover
Posted: Mon 23. Nov 2015, 12:34
by nameless1
gib mir zugriff dann setze ich dir es um -> skype