Cerca nel forum:
Cerca


Autore Messaggio
Messaggio13/04/2010, alle 19:04 (UTC)    
Oggetto: [JavaScript] Immagine al passaggio del mouse su un link

Salve a tutti,
in questo topic propongo un codice in cui al passaggio del mouse su un link, si avvia una mini-immagine. in cosa consiste potete vedere l'altreprima di sotto:

di seguito riporto il codice:

Codice:

<style type="text/css">

.bulletimagestyle{ /*Absolute position bullet image. No need to modify*/
position: absolute;
left: -200px;
}

</style>

<script type="text/javascript">


//Define your bullet image(s) via arbitrary variables, where bulletimg=["imagepath", imagewidth, offsetxfromroot, offsetyfromroot]
var bulletimg1=["http://img.webme.com/pic/c/chaproducciones/001.png", 13, 2, 0]
var bulletimg2=["http://img.webme.com/pic/c/chaproducciones/002.png", 16, 4, 0]
var bulletimg3=["http://img.webme.com/pic/c/chaproducciones/003.png", 16, 4, 0]


////Stop editting here/////////////////////
var classnameRE=/(^|\s+)ddbullet($|\s+)/i //regular expression to screen for classname within element

function caloffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}

function displaybullet(linkobj){
var reltovar=window[linkobj.getAttribute("rel")]
bulletobj.setAttribute("src", reltovar[0])
bulletobj.style.left=caloffset(linkobj, "left")-reltovar[1]-reltovar[2]+"px"
bulletobj.style.top=caloffset(linkobj, "top")-reltovar[3]+"px"
bulletobj.style.visibility="visible"
}

function modifylinks(){
bulletobj=document.createElement("img")
bulletobj.setAttribute("id", "bulletimage")
bulletobj.className="bulletimagestyle"
document.body.appendChild(bulletobj)
for (i=0; i<document.links.length; i++){
if (typeof document.links[i].className=="string" && document.links[i].className.search(classnameRE)!=-1){
document.links[i].onmouseover=function(){displaybullet(this)}
document.links[i].onmouseout=function(){bulletobj.style.visibility="hidden"}
}
}
}

if (window.addEventListener)
window.addEventListener("load", modifylinks, false)
else if (window.attachEvent)
window.attachEvent("onload", modifylinks)
else if (document.getElementById || document.all)
window.onload=modifylinks

</script>
<center>_________________________________<br>
Mini Imagenes En Los Links Al Pasar El mouse<br>

<a href="http://chaproducciones.tk" class="ddbullet" rel="bulletimg1">  Chaproducciones</a><br>

<a href="http://retrasados.tk" class="ddbullet" rel="bulletimg2">Retrasados.tk</a><br>
<a href="http://retrasadosforo.tk" class="ddbullet" rel="bulletimg3">RetrasadosForo.tk</a></center><br>
<textarea rows="20" cols="50">
coloca esto por debajo de pagina:



<style type="text/css">

.bulletimagestyle{ /*Absolute position bullet image. No need to modify*/
position: absolute;
left: -200px;
}

</style>

<script type="text/javascript">


//Puedes agregar mas
bulletimg=["imagepath", imagewidth, offsetxfromroot, offsetyfromroot]
var bulletimg1=["latest_reply.gif", 13, 2, 0]
var bulletimg2=["right_arrow.gif", 16, 4, 0]
var bulletimg3=["more.gif", 16, 4, 0]


////Stop editting here/////////////////////
var classnameRE=/(^|\s+)ddbullet($|\s+)/i //regular expression to screen for classname within element

function caloffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}

function displaybullet(linkobj){
var reltovar=window[linkobj.getAttribute("rel")]
bulletobj.setAttribute("src", reltovar[0])
bulletobj.style.left=caloffset(linkobj, "left")-reltovar[1]-reltovar[2]+"px"
bulletobj.style.top=caloffset(linkobj, "top")-reltovar[3]+"px"
bulletobj.style.visibility="visible"
}

function modifylinks(){
bulletobj=document.createElement("img")
bulletobj.setAttribute("id", "bulletimage")
bulletobj.className="bulletimagestyle"
document.body.appendChild(bulletobj)
for (i=0; i<document.links.length; i++){
if (typeof document.links[i].className=="string" && document.links[i].className.search(classnameRE)!=-1){
document.links[i].onmouseover=function(){displaybullet(this)}
document.links[i].onmouseout=function(){bulletobj.style.visibility="hidden"}
}
}
}

if (window.addEventListener)
window.addEventListener("load", modifylinks, false)
else if (window.attachEvent)
window.attachEvent("onload", modifylinks)
else if (document.getElementById || document.all)
window.onload=modifylinks

</script>


Fonti Recenti mi hanno comunicato che il codice funziona sono con il browser Windows Internet Explorer.

-_-_--_-_-_
Copia, Traduzione e Adattamento by Sloong!
Topic Originale: http://www.paginawebgratis.es/forum/viewtopic.php?t=22933
Buona Giornata a Tutti! Wink Smile [/code]
______________


L'ultima modifica di hikiing il 13.04.2010, 20:09, modificato 2 volte
Mostra prima i messaggi di:   


Powered by phpBB © 2001, 2005 phpBB Group
phpbb.it