comment changer l'image de fond d'une cellule par un menu ?

**@rno0059** · 22/06/2007, 20h45

Bonsoir,
Je travaille sur un site construit à partir d'un tableau et d'iframes. Voici un lien vers une maquette : http://www.bc-douchy.fr/essai/index.htm
Je voudrais savoir si je peux changer l'image d'une cellule (celle dans laquelle est écrit "les nouvautés") quand je clique sur un bouton de menu.
Cela permettrait d'avoir un cadre personnalisé de mon iframe en fonction du menu choisi.

Merci pour votre aide.

@+

@rno

**Sancho_54** · 22/06/2007, 23h10

Il suffit que tu change le background-image de ton iframe lors du clique sur ton menu

**@rno0059** · 22/06/2007, 23h34

Envoyé par Sancho_54

Il suffit que tu change le background-image de ton iframe lors du clique sur ton menu

OK, alors, dans ce code ci-après, que faut-il ajouter pour effectuer le changement d'image dans l'iframe.

Code :

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

1
2
3
4
5
6
	  <a href="page1.htm" target="iframe1" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','p1b.png',1)">
	     <img src="p1a.png" name="Image1" width="150" height="30" border="0"><br>
      </a><a href="page2.htm" target="iframe1" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','p2b.png',1)">
	     <img src="p2a.png" name="Image2" width="150" height="30" border="0"><br>
      </a><a href="news.htm" target="iframe1" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','newsb.png',1)">
	     <img src="newsa.png" name="Image3" width="150" height="30" border="0"></a><a href="page2.htm" target="iframe1" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','p2a.png',1)"></a>

Est-ce un truc du genre

Code :

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

onclick

?

En fait, j'aimerai changer l'image qui se situe au dessus de l'iframe. C'est le background d'une cellule de tableau. Est-ce qu'on peut donner un nom aux cellules de tableau est utiliser ensuite un code du type "onclick nomcellule.background="aa.png" ???

Merci d'aider une grand débutant...

@+

@rno

**Kerod** · 23/06/2007, 00h07

TU peux donner un exemple de ce que tu veux faire avec du code stp ?

**@rno0059** · 23/06/2007, 00h25

Envoyé par Kerod

TU peux donner un exemple de ce que tu veux faire avec du code stp ?

c'est bien ça le problème : je ne sais pas quoi mettre comme code.
En gros, j'ai créé l'aspect de ma page en découpant sous photoshop une grande image (voir l'essai http://www.bc-douchy.fr/essai/index.htm)
le menu est fait d'images survolées et lorsque je clique sur un bouton, la page correspondante s'affiche dans l'iframe au centre de la page. cette iframe accepte la transparence ce qui permet de garder une uniformité visuelle de ma page.
Par ce même clic sur le bouton du menu, je voudrais que l'image (un background de cellule de tableau) au dessus de l'iframe change (pour rappeler le titre de la page qu'on visualise à cet instant.)

Je me demandais si cela était possible et quel code fallait-il saisir pour que ce changement d'image se fasse.

L'autre possibilité serait de changer l'image de fond de l'iframe. C'est peut-être plus facile à réaliser car mon iframe possède un nom (iframe1).

J'espère avoit été clair

Merci de votre aide

@+
@rno

**Kerod** · 23/06/2007, 00h32

Ah je vois dans ce cas ce que je propose c'est :

Code html :

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

<td id=titrepage"></td>

Code html :

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

<a href="#" onclick="document.getElementById('titrePage').style.backgroundImage = 'tonimage'"></a>

**@rno0059** · 23/06/2007, 00h58

Bonsoir et merci pour cette réponse,
c'est en effet ce que je veux faire.

J'ai tapé le code proposé mais ça n'a pas d'effet

Voici l'intégralité du code de ma page :

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
64
65
66
67
68
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Document sans nom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
 
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
 
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
 
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
 
<body onLoad="MM_preloadImages('p1b.png','p2a.png','newsb.png')">
<DIV align="center">
<table width="750" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="250 "height="100" background="a.png"></td>
    <td width="500" height="100" colspan="3" background="b.png"></td>
  </tr>
  <tr>
    <td width="250" height="400" rowspan="3" background="c.png"><div align="center">
      <p><a href="page1.htm" target="iframe1" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','p1b.png',1)" onClick="document.getElementById('titrepage').style.backgroundImage='h.png'">
	     <img src="p1a.png" name="Image1" width="150" height="30" border="0"><br>
      </a><a href="page2.htm" target="iframe1" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','p2b.png',1)">
	     <img src="p2a.png" name="Image2" width="150" height="30" border="0"><br>
      </a><a href="news.htm" target="iframe1" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','newsb.png',1)">
	     <img src="newsa.png" name="Image3" width="150" height="30" border="0"></a><a href="page2.htm" target="iframe1" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','p2a.png',1)">      </a></p>
 
    </div></td>
    <td id="titrepage" width="500" height="30" colspan="3" background="d.png"></td>
  </tr>
  <tr>
    <td width="30" height="340" background="e.png"></td>
    <td width="440" height="340" background="f.png">
	<iframe name="iframe1" width="440" height="340" src="news.htm" frameborder="0" allowtransparency="true" scrolling="auto">
</iframe>
	</td>
    <td width="30" height="340" background="g.png"></td>
  </tr>
  <tr>
    <td width="500" height="30" colspan="3" background="h.png"></td>
  </tr>
</table>
</DIV>
</body>
</html>

Théoriquement, l'image d.png devait se transformer en h.png sous l'action onclick.

Peut-être une erreur de syntaxe ??

Si tu peux y regarder...

Merci

**Kerod** · 23/06/2007, 01h22

A remplacer par ceci :

Code :

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

<td id="titrepage" width="500" height="30" colspan="3" style="background-image: url('d.png')"></td>

**@rno0059** · 23/06/2007, 08h26

Bonjour,

Ca ne marche toujours pas

**Kerod** · 23/06/2007, 11h25

Désolé il manque effectivement une chose :

Code :

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

<a href="#" onclick="document.getElementById('titrePage').style.backgroundImage = url('tonimage')"></a>

**@rno0059** · 23/06/2007, 11h49

Toujours pas,

je viens de mettre la page dans l'état actuel pour que tu vois si j'ai foiré au niveau du code que tu m'as donné :
http://www.bc-douchy.fr/essai/index.htm

Si tu veux, je peux t'envoyer l'ensemble des fichier images pour que tu testes la page en local (excuse moi, j'ai l'impression d'abuser un peu...)

@+
@rno

**Kerod** · 23/06/2007, 12h00

Voilà le problème :

Code :

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

<td id="titrepage"

et

Code :

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

<a href="#" onclick="document.getElementById('titrePage').style.backgroundImage = url('tonimage')"></a>

Choisi la notation : titrepage ou titrePage. mais au final il doivent être identique

ET de préférence avec le onclick comme ceci :

Code :

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

<a onmouseover="MM_swapImage('Image1','','p1b.png',1)" onmouseout="MM_swapImgRestore()" onclick="document.getElementById('titrePage').style.backgroundImage = 'url(h.png)'" target="iframe1" href="page1.htm">

**@rno0059** · 23/06/2007, 12h07

malheureusement ça ne marche toujours pas. C'est désespérant...

@+ et merci de "t'acharner"

**Kerod** · 23/06/2007, 12h08

SI si ça fonctionne tu as tout fait comme je l'ai dit ?

Car j'ai testé

**@rno0059** · 23/06/2007, 12h13

OK, ça marche !!!

(j'avais fait une faute de frappe)

Un énorme MERCI

**@rno0059** · 24/06/2007, 23h29

Salut,

Petite question encore : ça ne marche pas sous firefox apparement.
Une solution ??

@+

@rno

**Kerod** · 24/06/2007, 23h44

C'est pas possible car la solution que je t'ai donné je l'ai testé avec Firefox 2

Si ça fonctionne pas c'est que tu as du modifier quelque chose

[Edit]
C'est bien ce que je disais : la console d'erreurs (intégré à Firefox) me dit

Erreur : document.getElementById("titrePage") has no properties
Fichier source : http://www.bc-douchy.fr/essai/index.htm
Ligne : 1

Et on voit dans ton code que tu ne l'as pas appelé titrePage mais titrepage

**@rno0059** · 24/06/2007, 23h56

Ok, merci Kerod, je vois que tu es toujours fidèle au poste !
Je change ça demain.
En revanche, titrePage et titrepage ne pose pas de problème sour IE7

Merci encore

@+

@rno

**Kerod** · 25/06/2007, 00h06

Ne te fies pas à IE7

Surtout que c'est abérant de voir que IE7 l'accepte

Il ne doit pas être sensible à la casse, et ça peut être une source d'erreur chez les developpeurs débutant.

Un conseil : adopte Firefox et sa console d'erreurs

comment changer l'image de fond d'une cellule par un menu ?

Tableau en CSS

Discussions similaires

Partager

Partager