[CSS] Forcer curseur

**Trunks** · 30/12/2005, 18h35

Bonjour,

Sur mon site, j'ai une mascotte en haut à droite du cadre, elle est en PNG. Pour la faire apparaître au dessus du cadre, j'ai appliqué un z-index: 1;.
Pour les messages, lorsque j'appuie sur la croix en haut( bouton input type="image"), alors ca entre sur une page qui efface les mails sélectionnés. Le hic c'est qu'avec l'image de la mascotte qui est juste au dessus, le bouton input ne marche pas. Si j'essaie de mettre un z-index, ça ne marche pas non plus. Que faire?

Si vous avez une idée, je suis preneur.

**OverCat** · 31/12/2005, 11h23

Salut,

Un bout de ton code serait le bienvenue.

Merci

**Trunks** · 31/12/2005, 13h56

D'accord.

Déjà un aperçu : ici

Ensuite pour la mascotte :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
.mascotte
{
	width: 144px;
	height: 178px;
	position: absolute;
	right: 0px;
	bottom: 380px;
	z-index: 1;
}

Avec un script pour gérer la transparence sous IE :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
img
{
	behavior: url('script/pngbehavior.htc');
}

Pour le bouton en question qui se trouve au dessus/dessous de l'image de la mascotte :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input class="supprimer" type="image" src="images/croix.png" alt="Supprimer" title="Supprimer" />

Voilà, j'ai pas trouvé ce qu'il fallait mettre dans la classe 'supprimer' pour que ça marche.

**OverCat** · 31/12/2005, 15h47

Quand tu dis qu'il ne marche pas, ça veut dire quoi ? tu peux pas cocher la case ?

**djnos** · 31/12/2005, 15h55

Salut, juste une suggestion :

As-tu essayé de mettre un z-index positif pour la croix et un z-index négatif pour l'image ?

Et quand tu te places au dessus de l'image, est-que tu vois la main pour cliquer ?

**djnos** · 31/12/2005, 15h59

Tu veux dire que tu fais un truc du style :

<input type="image" onclick="javascript:document.getElementById('idForm').submit();" />

C'est ca ?

<input type="image" />, c'est censé marché comme <input type="button" />, pas comme <input type="submit"> c'est pourquoi il faut que tu lui associe une action, notamment celle de valider le formulaire en utilisant un script js.

**djnos** · 31/12/2005, 17h15

Je sais pas, ça ressemble peut-être à ça ce que tu veux faire :

http://tony.coml.free.fr/dev/

Pour info : le code php :

http://tony.coml.free.fr/dev/test.phps

**Trunks** · 31/12/2005, 17h34

Si je mets un z-index négatif pour l'image de la mascotte, alors il se trouvera en dessous du cadre, et ça c'est pas bon non plus. J'ai essayé de mettre un z-index plus grand pour la crois, mais je ne pouvais tout de même pas cliquer dessus. Je vais regarder pour ton code. Merci

**djnos** · 31/12/2005, 17h47

Tu sais quoi, c'est sûrement ton script pour la transparence du png qui gêne le reste, faudrait voir ton code pour tenter de trouver une solution.

au fait, il faut que tu mettes aussi un z-index pour le cadre

**Trunks** · 31/12/2005, 17h58

Voila le script :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<public:component lightWeight="true">
<public:attach event="onpropertychange" onevent="propertyChanged()" />
<script>
 
var supported = /MSIE ((5\.5)|[6789])/.test(navigator.userAgent) &&
				navigator.platform == "Win32";
// supported = false;				
 
var realSrc;
var blankSrc = "images/blank.gif";
 
if(supported)
	{
	fixImage()
	}
else
	{
//	alert(element.src.substring(element.src.length - 3,element.src.length));
	if (element.src.substring(element.src.length - 3,element.src.length) == "png")
		element.src = element.src.substring(0, element.src.length - 4) + '.gif'
	}
 
function propertyChanged() {
	if (!supported) return;
 
	var pName = event.propertyName;
	if (pName != "src") return;
	// if not set to blank
	if (!new RegExp(blankSrc).test(src))
		fixImage();
};
 
function fixImage() {
	// get src
	var src = element.src;
 
	// check for real change
	if (src == realSrc && /\.png$/i.test(src)) {
		element.src = blankSrc;
		return;
	}
 
	if ( ! new RegExp(blankSrc).test(src)) {
		// backup old src
		realSrc = src;
	}
 
	// test for png
	if (/\.png$/i.test(realSrc)) {
		// set blank image
		element.src = blankSrc;
		// set filter
		element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft." +
					"AlphaImageLoader(src='" + src + "',sizingMethod='scale')";
	}
	else {
		// remove filter
		element.runtimeStyle.filter = "";
	}
}
 
</script>
</public:component>

**djnos** · 31/12/2005, 18h27

J'ai readapté le code de l'exemple avec un png et ton script applique dessus, on peut quand meme cliquer sur le bouton :

http://tony.coml.free.fr/dev/

Je suis sûrement passé à côté de quelque chose

**Trunks** · 31/12/2005, 18h38

En effet ça marche sur ton exemple. Cependant, ma situation est un peu différente car le bouton supprimer se trouve dans une iframe alors que la mascotte se trouve sur la page principale. Ca vient peut etre de là le pb. Je mettrais bien mon site en ligne, mais vu que derrière j'ai une base ACCESS, je ne peux pas mettre ça sur mon site.
Je vais refaire une page exemple.

**djnos** · 31/12/2005, 18h41

Ah oui ca risque d'être un brin différent.

**djnos** · 31/12/2005, 18h53

Oupss, je m'étais trompé dans l'exemple à cause des extensions, j'ai remodifié et ca marche quand même en prenant ton script, ca doit vraiment etre un probleme d'iframe.

**djnos** · 31/12/2005, 19h12

Pardon, au fait tu peux m'expliquer comment on voit le résultat de la transparence ?

Non pas la peine je viens de comprendre l'intérêt

**djnos** · 31/12/2005, 19h40

bon si on fait le point :

on a ça si on veut bien que la croix soit par dessus la mascotte :

http://tony.coml.free.fr/dev/index2.html

sinon, on a bien la transparence mais on peut pas cliquer sur la croix :

http://tony.coml.free.fr/dev/index.html

Tu veux la 2° solution, ou on pourrait cliquer dessus, c'est ça ?

**djnos** · 31/12/2005, 19h43

On va bien réfléchir sur le problème, cependant j'ai peut-être une solution de secours ! Si on peux trouver plus propre !

**djnos** · 01/01/2006, 11h58

Salut, je te propose une solution, bon bah comme je t'ai dit moi je trouve ça légèrement la bidouille mais on obtient ce que je pense que tu voulais obtenir (testé et compatible firefox et ie) : la croix légèrement cachée sous la transparence de la mascotte png mais carement cliquable.

Je t'explique vite fait :

- tu insères une image (transparence.gif) transparente qui fait la même taille que la croix avec les mêmes attributs de position, et taille tu lui mets les propriétés CSS cursor:pointer et un z-index:3

Du coup on ne voit pas cette image mais ca rend le bouton cliquable

Avant de faire ça j'ai essayé de faire un bloc avec la propriete background-color: transparent mais ca marche pas trop sous ie, chose bizarre.

Pour l'aperçu :

http://tony.coml.free.fr/dev/

Alors pour te facilité les choses je te donne une archive rar où y a les fichiers de l'exemple avec les images :

http://tony.coml.free.fr/dev/dev.rar

Dans ton cas en fait on a pas trop le choix car toutes les images qui sont sous la mascotte sont traitées pour obtenir la transparence, du coup elles sont transformées en un fameux blank.gif (le script doit être intérresant) et il n'est plus possible d'utiliser l'une d'elle pour lui associer une interaction avec le user.

Sinon il y a toujours la deuxième solution mais c'est pas beau car la croix(bouton dans l'exemple) va passer par dessus la mascotte or le but premier du script c'est de faire un png transparent donc qui passe par dessus la croix :
cf : http://tony.coml.free.fr/dev/index2.html

Je te remercie de m'avoir fait connaître la transparence des png, chose que j'utiliserais sûrement dans mes prochains développements WEB.

**djnos** · 01/01/2006, 12h13

Pour ceux que ça interesse je mets un peu de code sur ce super site, attention, je prétend pas être conforme W3C !

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
<title>test image</title>
</head>
<style type="text/css">
.suppr
{
position: absolute;
top: 110px;
left: 20px;
width: 40px;
height: 40px;
}
.image
{
z-index: 2;
position: absolute;
top: 0px;
left: 0px;
height: 150px;
width: 150px;
behavior: url('script.htc');
}
.madiv
{
width: 338px;
height: 338px;
position: absolute;
left: 20px;
top: 50px;
}
.transparent
{
z-index:3;
cursor:pointer;
}
</style>
<body style="margin: 0px;">
<img src="./arriere.jpg" style="width:400px;height:400px;" />
<div class="madiv">
<img src="./images/mascotte.png" class="image" alt="Mascotte" title="Mascotte" />
<input class="suppr" type="image" src="./bouton.gif" />
<img alt="bouton" src="./images/transparent.gif" class="suppr transparent" onclick="javascript:document.getElementById('monFormulaire').submit();" />
</div>
<form style="font-family: verdana;" action="test.php" method="post" id="monFormulaire">
<input type="checkbox" name="tabCheck[]" value="case1" /> Choix 1
<br />
<input type="checkbox" name="tabCheck[]" value="case2" /> Choix 2
<br />
<input type="checkbox" name="tabCheck[]" value="case3" /> Choix 3
</form>
</body>
</html>

[CSS] Forcer curseur

CSS

Vue hybride

Discussions similaires

Partager

Partager