28173 sujets

CSS et mise en forme, CSS3

Problème résolu - Voudrais poster la solution.

Bonjour à tous,
Dans mes derniers posts je demandais de l'aide pour un rollover sur image (voir mon dernier post).
En fouillant sur le web et en passant plusieurs heures à faire des essais Smiley langue (merci de ne pas m'avoir donné de réponse, mais comme je suis têtu et tenace, je fouille Smiley cligne )
- j'ai trouvé la solution Smiley biggrin Smiley ravi .
Comment en faire profiter les autres, je réponds à mon propre post en le citant, ou ...., euh bon ce n'est peut-être pas très orthodoxe ! Smiley rolleyes Smiley confus ?
voir sur le site, la page histoire, passer sur les petites vignettes avec la souris, et Smiley biggrin http://users.tvcablenet.be/personal/tvcn143735/
Merci de me dire quoi.
Bonne soirée.
A bientôt
Jean-Pierre
Salut.

a écrit :
merci de ne pas m'avoir donné de réponse, mais comme je suis têtu et tenace, je fouille
De rien. Comme on est tous bénévoles & occupés ailleurs en même temps, merci de s'adresser directement à Tim-Berners Lee pour toute réclamation concernant un sujet non résolu sur le forum.

a écrit :
Comment en faire profiter les autres
En postant la solution dans le fil que tu as ouvert, tout simplement.
Thomas D. a écrit :
Salut.

merci de ne pas m'avoir donné de réponse, mais comme je suis têtu et tenace, je fouille
De rien. Comme on est tous bénévoles & occupés ailleurs en même temps, merci de s'adresser directement à Tim-Berners Lee pour toute réclamation concernant un sujet non résolu sur le forum.

Comprenons nous bien, je n'avais aucune intention de poster une quelconque réclamation...., je suis bien content de ne pas avoir eu de réponse, cela m'a obligé de chercher et de trouver in fine. Smiley ravi

a écrit :
Comment en faire profiter les autres
En postant la solution dans le fil que tu as ouvert, tout simplement.
Ok, je vais essayer.
Bonne journée et encore merci.
Très joli en effet, la solution m'intéresse Smiley cligne
Mais ta page d'accueil ne fonctionne pas du tout sous Firefox 2 (OK sous IE7).
Misange a écrit :
Très joli en effet, la solution m'intéresse Smiley cligne
Mais ta page d'accueil ne fonctionne pas du tout sous Firefox 2 (OK sous IE7).

Voici la solution
dans la page "Histoire"
mettre entre body, les commentaires peuvent être effacés, c'était pour mon usage perso. 
<body> 
<!-- Fonction proprement dite -->
<span class="left"><img src="isabelle-pt.jpg" class="domroll isabelle-gr.jpg"/></span>  
<span class="right"><img src="zacharie-pt.jpg" class="domroll zacharie-gr.jpg"/></span>
<script src="chrisdomroll.js"> 
</script>  
</body>

remplacer isabelle...et zacharie....par le nom de tes images. Smiley cligne Il faut faire des test pour avoir la bonne dimension et que les images ne soient pas trop lourdes, c'est un peu à tatons....! Smiley sweatdrop
Le 
<span class="left">
(ou right) permet au texte de s'enrouler autour de l'image. Ici le texte vient se mettre entre les deux images. Smiley smile et voici le contenu du script, qu'il faut reprendre tel quel

//=====================================================================
//  DOM Image Rollover v3 (hover)
//
//  Demo:  http://chrispoole.com/scripts/dom_image_rollover_hover
 
//  Script featured on: Dynamic Drive (http://www.dynamicdrive.com)
//=====================================================================
//  copyright Chris Poole
//   http://chrispoole.com
 
//  This software is licensed under the MIT License 
//  <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<http://opensource.org/licenses/mit-license.php>
//=====================================================================

function domRollover() {
	if (navigator.userAgent.match(/Opera (\S+)/)) {
		var operaVersion = parseInt(navigator.userAgent.match(/Opera (\S+)/)[1]);
	}
	if (!document.getElementById||operaVersion <7) return;
	var imgarr=document.getElementsByTagName('img');
	var imgPreload=new Array();
	var imgSrc=new Array();
	var imgClass=new Array();
	for (i=0;i<imgarr.length;i++){
		if (imgarr[i].className.indexOf('domroll')!=-1){
			imgSrc[i]=imgarr[i].getAttribute('src');
			imgClass[i]=imgarr[i].className;
			imgPreload[i]=new Image();
			if (imgClass[i].match(/domroll (\S+)/)) {
				imgPreload[i].src = imgClass[i].match(/domroll (\S+)/)[1]
			}
			imgarr[i].setAttribute('xsrc', imgSrc[i]);
			imgarr[i].onmouseover=function(){
				this.setAttribute('src',this.className.match(/domroll (\S+)/)[1])
			}
			imgarr[i].onmouseout=function(){
				this.setAttribute('src',this.getAttribute('xsrc'))
			}
		}
	}
}
domRollover();

Je n'ai donc rien inventé, Bon amusement.
NB : Une idée de pourquoi cela ne fonctionne pas sur firefox 2 ?
une piste ?
Cela m'aiderait. A cette heure-ci, je te dis bon appétit Smiley cligne [/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i]
Modifié par Cygnus (15 Feb 2007 - 20:01)
Sujet clos
Aller à