Rollover sur du texte (avec effet de loupe)

Commenter

Contenu du snippet

Sur le meme principe que les vagues, mais la c'est uniquement en passant la souris sur le texte, qu'il grossit au centre.

Source / Exemple : 


<script LANGUAGE="JavaScript">
text = "Hello world Hello world Hello world Hello world"
tailleMax = 50 //taille max des caractères
tailleMin = 10 //taille min des caractères

function initEffetLoupe(obj) {
  document.getElementById(obj).innerHTML = "<TABLE><TR onMouseOver=effetLoupe('"+obj+"')><TD>" + text + "</TD></TR></TABLE>"
}

function effetLoupe(obj) {
  aff = ""
  increment = (tailleMax-tailleMin)/(text.length/2)
  pos = 0
  taille = tailleMin

  for(a=0; a<text.length; a++) {
    lettre = text.charAt(a)
    if (pos+tailleMin >= tailleMax) { increment = -increment }
    pos += increment
    taille = tailleMin + pos
    aff += "<TD><FONT style='font-size:" + taille + "'>"+lettre+"</FONT></TD>"
  }

  document.getElementById(obj).innerHTML = "<TABLE><TR onMouseOut=initEffetLoupe('"+obj+"')>" + aff + "</TR></TABLE>"
}
</script>
<DIV ID="txt1" >-</DIV>
<script LANGUAGE="javascript">
  initEffetLoupe("txt1")
</script>

Conclusion :


Remarques, questions, améliorations n'hesitez pas ;)

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (cs_jerms)