Bilderwechsel bei hover

[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?

[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');
}
-->

[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>

[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?!

[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 ....

.
.
.

[nameless1]

gib mir zugriff dann setze ich dir es um -> skype