Hola!
He estado intentando recrear el efecto que hay en esta pagina:
http://efterfesten.com/?p=vimmel&uqid=43408119946738 cuando uno hace mouseover en las imagenes.
El efecto me funciona con la ayuda de javascript y una capa que se esconde cuando hago mouse over. El problema esta en que las imagenes que muestro en la pagina son iteradas con Struts y el efecto del javascript solo se ejecuta en la primera imagen.
Explico un poco mas con codigos:
Aqui estoy mostrando las imagenes que estan en la base de datos con la ayuda de s:iterator y s:if.
Como veran en el codigo primero pregunto el id de la imagen y luego muestro las imagenes. En la primera vuelta muestro las imagenes con el id 1, 4, 7, 10. Esto me entregara las imagenes en una columna. Dentro del div que contiene las imagenes llamo a la funcion "showlayer" que ejecutara el efecto de mostrar y esconder la capa sobre la imagen.
Código:
<s:iterator value="temRandomthemes" status="counter">
<s:if test="#counter.count == 1 or #counter.count == 4 or #counter.count == 7 or #counter.count == 10">
<div class="wrapGreen" onmouseout="javascript:showlayer('greenMask');" onmouseover="javascript:showlayer('greenMask');">
<div class="card">
<s:url action="viewPublicTheme" id="url" escapeAmp="false">
<s:param name="crudTheme.id" value="id"/>
<s:param name="crudThemeEnhancer.id" value="themeEnhancer.id"/>
</s:url>
<a href="<s:property value="#url"/>">
<img class="listPublicThemesImages" alt="Picture" src="ShowImage.action?id=<s:property value="id"/>&imageType=themeThumb"/>
</a><br>
</div>
<div id="greenMask">
<div id="themeTitle" class="brodThemeTitle">
<s:property value="themeName"/>
</div>
<img src="/Fixafesten/images/frame_big_inner.gif" border="0"/>
</div>
</div>
</s:if>
....
El siguiente if es exactamente igual salvo por el numero de las id.
Este es el javascript
:
Código:
/*Show/Hide Function for Theme List*/
function showlayer(layer){
var myLayer = document.getElementById(layer).style.display;
if(myLayer=="none"){
document.getElementById(layer).style.display="block";
} else {
document.getElementById(layer).style.display="none";
}
}
Como dije antes el problema esta en que el efecto solo funciona en la primera imagen, si hago mouseover en la segunda imagen sigue siendo la primera imagen la que muestra el efecto.
Como lo hago para que el efecto se relize solamente en la imagen a la cual hago mouseover???