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

**Dayren** · 05/09/2009, 21h27

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 :

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

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.

FoxLeRenard · 05/09/2009, 23h06

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 !

**Dayren** · 06/09/2009, 08h50

Bonjour,

Le lien est en positionnement absolu.

FoxLeRenard · 06/09/2009, 11h45

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

Merci donc de donner ton code

**Dayren** · 06/09/2009, 14h15

Ah d'accord, désolé

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
 
<?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 :

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
 
* {
    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

FoxLeRenard · 06/09/2009, 15h52

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

**Macmillenium** · 06/09/2009, 16h07

Bonjour,

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).

**Dayren** · 06/09/2009, 20h23

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 !

**Macmillenium** · 06/09/2009, 21h06

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 css :

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

1
2
 
a { cursor:pointer; }

**Dayren** · 06/09/2009, 22h17

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

**113.113** · 09/10/2009, 09h15

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 css :

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
._
{
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 :

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

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!
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

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

HTML

Discussions similaires

Partager

Partager