Lien au-dessus d'un swf : problème curseur

Version imprimable

Bonjour à tous,

Voici le contenu de ma page :

- un .swf en fond
- un lien positionné au-dessus de ce .swf.

Le lien fonctionne.
Mais par contre, dans certains navigateurs (Safari notamment), lors du survol de la souris sur le lien, le curseur ne prend pas la forme d'une main.

Voici mon code :
Code:

1 2 3 4 5 6 7 8 <a href="http://www.machintruc.fr/">Lien</a> <object type="application/x-shockwave-flash" data="leFlash.swf" width="335" height="615"> <param name="movie" value="leFlash.swf" /> <param name="AllowScriptAccess" value="always" /> <param name="wmode" value="transparent" /> </object>
J'ai essayé le positionnement absolu plus z-index, positionnement relatif ... ça ne marche pas.

Merci d'avance pour votre aide.

05/09/2009, 22h06
FoxLeRenard

Bonjour,

Nous devons étre loin de posséder le vrais contexte que tu décris, car le code que tu donne met forcément le lien a coté du flash ! :roll: 8O
06/09/2009, 07h50
Dayren

Bonjour,

Le lien est en positionnement absolu.
06/09/2009, 10h45
FoxLeRenard

Citation:

Envoyé par Dayren

Bonjour,
Le lien est en positionnement absolu.

Alors tu poses une question sans vouloir donner le code, mais c' est impossible, car il existe mille raisons a ton probléme, si tu poses la question ici, c'est que tu nous demandes "que faire" ...

Par exemple selon le DOCTYPE que tu as choisi pour ta page les réactions des navigateurs différent.
D'autre part l'importance de ta feuille de style est fondamentale puisque tu peux étre dans un cas de haslayout :roll:

Merci donc de donner ton code

Ah d'accord, désolé :oops:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
	<title>Essai</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" type="text/css" href="essai.css" media="all" />
</head>
 
<body>
    <a id="lien" href="http://www.google.fr/">Lien</a>
    <object id="leSwf" type="application/x-shockwave-flash" data="leSwf.swf" width="335" height="615">
        <param name="movie" value="leSwf.swf" /><param name="AllowScriptAccess" value="always" />
        <param name="wmode" value="transparent" />
    </object>      
</body>
 
</html>

Le CSS :

Code:

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
 
* {
    padding: 0px;
    margin: 0px;
}
 
body {
    margin: auto;
    text-align: center;
}
 
#leSwf {
    position: absolute;
    z-index: 0;
    left: 0px;
}
 
#lien {
    color: red;
    font-size: 30px;
    position: absolute;
    z-index: 1;
    top: 150px;
    left: 250px;
}

Merci :)

06/09/2009, 14h52
FoxLeRenard

Ok je comprends,
j'ais testé, alors va prendre le source en clic droit sur cette page et fais
affiché source, tu pourras t'en inspirer

http://studiosmilounitch.free.fr/alsaExemple/temp.html

Tiens moi au courant :ccool:
06/09/2009, 15h07
Macmillenium

Bonjour,

Citation:

Envoyé par Dayren

Mais par contre, dans certains navigateurs (Safari notamment), lors du survol de la souris sur le lien, le curseur ne prend pas la forme d'une main.

Le lien est-il cliquable ? ou c'est juste un problème de style ?

Fox, il n y a pas de Haslayout dans Safari, c'est un concept propriétaire à Ms (versions IE5.5/6/7).
06/09/2009, 19h23
Dayren

Merci d'avoir fait cette page d'essai FoxLeRenard, mais j'ai malheureusement le même problème que sur ma page :(

Je suis sous Mac (Leopard). Le problème survient :
- de temps en temps sous Firefox 3.5,
- tout le temps sous Safari 4,
- jamais sous Opera 9
Je n'ai pas testé avec des versions antérieures.

J'ai Windows XP en virtual machine : aucun problème sous IE6 et 7, Firefox, Opera 9 et Chrome.

Donc, seuls Firefox 3.5 et Safari 4 posent problème sous Mac.

@ Macmillenium : le lien est cliquable, il s'agit d'un problème de style concernant le curseur. Quand on survole un lien, le curseur est censé se transformer en main ; or là, il reste dans sa forme habituelle.

D'ailleurs, quand je fais un clic droit sur le lien, j'obtiens un menu Flash (A propos de Flash Player, etc ...), ce n'est pas normal.

On dirait que le .swf reste toujours devant les autres éléments HTML, bien qu'au niveau du code et visuellement ce ne soit pas le cas ! 8O
06/09/2009, 20h06
Macmillenium
Ne positionne pas le flash en absolue (tu as déjà le paramètre wmode).

Si le problème persiste, il reste une dernière solution :
Code:

1 2 a { cursor:pointer; }
06/09/2009, 21h17
Dayren

J'ai tenté ces deux propositions : rien malheureusement :(

Si rien ne fonctionne, je pense contourner le problème en mettant dans le .swf, juste derrière le lien, un movieclip avec alpha 0 et buttonMode = true afin que le curseur prenne bien la forme de main.

Merci pour votre aide en tous cas :)

Bonjour,
une astuce .css permet de placer un lien sur .swf, qui soit opérationnel dans tous les navigateurs dont IE évidemment (si rétif, si rétif, ...).

Principe de l"info-bulle" qui capte la fonction du lien; sans ActionScript, en effet.
L'intérêt de procéder ainsi est manifeste car, outre d'être opérationnel dans tous les navigateurs, au survol du curseur le .swf s'illumine du texte ou de l'image que l'on a choisi d'y faire figurer.
En résumé, voici ce qui fonctionne avec tous les navigateurs, dont IE:

:::::::::::::::::::::::::::::
.ccs
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 ._ { position:relative; display:block; width:_px; /*largeur du .swf*/ height:_px /*largeur du .swf*/ } ._ span { display:none } ._:hover span { display:block; position:absolute; top:0; /*depuis le haut du .swf*/ left:0; /*depuis la gauche du .swf*/ color:#_ _ _ ; /*couleur du texte*/ border: _px solid #_ _ _; padding:_px _px _px _px /*espacement interne du champ depuis le haut, la droite, le bas, la gauche */ }
:::::::::::::::::::::::::::::
.html
Code:

1 2 3 4 5 6 7 8 9 10 11 <body> <a class="_" href="_.htm"> <object _ _ _ > <param _ _ _ /> </object> <span> Texte cliquable ou <img src="_.jpg" alt="#" /> qui s'affiche en surbrillance au survol du curseur ... </span> </a> </body>
Cela fonctionne, donc!
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::