iframes déroulantes (html)

Suite à une grosse demande de la part des visiteurs, j'ai décidé de vous écrire un petit tutoriel sur comment faire une iframe déroulante, sans barre de défilement puisque je l'utilise régulièrement. Une iframe qui se déroule vers le haut et vers le bas seulement en passant la souris sur du texte ou des images. Le script original vient de [Vous devez être inscrit et connecté pour voir ce lien]. Vous y rendre pour voir un exemple fonctionnel.

le fonctionnement

Tout d'abord, il est important que les barres de défilement soient bloquées dans votre iframe. Ceci est défini par le paramètre scrolling="no".

Code:

<iframe src="PAGE.html" scrolling="no"></iframe>

Ensuite, dans chaque page qui pourrait être chargée DANS la iframe, vous devez ajouter ce code complètement dans le bas, juste au-dessus de &lt;/body&gt;. Ce code doit toujours être à la fin de la page, sinon ca ne fonctionnera pas.

Code:

<script language="JavaScript1.2">

//Scrollable content III- By http://www.dynamicdrive.com

var speed, currentpos=curpos1=0,alt=1,curpos2=-1

function initialize(){
if (window.parent.scrollspeed!=0){
speed=window.parent.scrollspeed
scrollwindow()
}
}

function scrollwindow(){
temp=(document.all)? document.body.scrollTop : window.pageYOffset
alt=(alt==0)? 1 : 0
if (alt==0)
curpos1=temp
else
curpos2=temp

window.scrollBy(0,speed)
}

setInterval("initialize()",10)

</script>

Finalement, il ne vous reste plus qu'à placer le défilement, qui se fait soit par un lien texte ou par un lien image (j'utilise toujours des images de flèches). Il ne faut pas que le défilement soit placé dans la iframe. Le défilement doit être placé à l'extérieur, bref dans votre page principale. Vous pouvez positionner ces bouts de code avec des DIVS, des tables, etc. Ce n'est pas important, tant que l'intégrité du code est conservé. Aussi, le défilement vers le haut n'a pas à être à côté de celui qui défile vers le bas. Vous pourriez les placer aux deux extrémités de la page que ca ne changerait rien. Personnellement, je les place toujours un au-dessus de l'autre, pour rester dans l'idée de "barre de défilement".

Défilement vers le haut en texte

Code:

<a href="#" onMouseover="scrollspeed=-2" onMouseout="scrollspeed=0">Up</a>

Défilement vers le bas en texte

Code:

<a href="#" onMouseover="scrollspeed=2" onMouseout="scrollspeed=0">Down</a>

OU

Défilement vers le haut en image

Code:

<a href="#" onMouseover="scrollspeed=-2" onMouseout="scrollspeed=0"><img src="UP.jpg" border="0"></a>

Défilement vers le bas en image

Code:

<a href="#" onMouseover="scrollspeed=2" onMouseout="scrollspeed=0"><img src="DOWN.jpg" border="0"></a>

Notez bien: Ce script fonctionne très bien également avec les images réactives (maps).

Aussi, vous pouvez changer la valeur de scrollspeed=2 et scrollspeed=-2 pour autre chose, tout dépendant à quelle vitesse vous désirez que votre contenu défile.

Oui exactement. C'est une iframe normale, mais on retire le système de déroulement standard et on en fait un avec des images ou des liens.