Liens vers des zones d'une page non courante

**brisso** · 15/01/2011, 17h52

Bonjour,
mon problème est le suivant.
Je voudrait tout simplement faire pointer un lien de ma page d'accueil vers une autre page mais à un endroit précis de cette autre page.

Par exemple on clique sur le liens 10 qui porte le nom : produit 10 et la page produit ce charge et emmène l'internaute directement au produit 10 qui porte le nom 10.

Sur une même page je connais le code du style gotoTop avec un

Code html :

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

 <a href="#" name="top"></a>

mais pour naviguer vers une autre page mes recherches se sont avérées infructueuses.

Merci par avance.

**brisso** · 15/01/2011, 20h07

Premier bout de réponse trouvé ici : http://nephi.unice.fr/CoursHTML/coursp9.php

Le seul problème c'est que le lien m'envoie bien vers la page mais pas au bon endroit quand je suis sur la page non courante.

En revanche, un fois arrivé sur la page en question et lorsque je clic sur les liens (ils sont présents sur toutes mes pages sous formes de bandeau latéral) et bien le liens m'envoie au bon endroit !

Je ne comprend donc pas trop quoi faire.

**winow** · 15/01/2011, 20h18

Salut
je crois que dans ton lien, il faut que tu nome Name="le nom de l'ancre de la page a ouvrir" pour que ca se position au niveau de l'ancre, je pense ?

**winow** · 15/01/2011, 20h21

tien, j'ai trouvé cela http://home.nordnet.fr/~sdelbecque/animus/liens2.htm

**brisso** · 15/01/2011, 20h33

Salut,
alors c'est en fait ce que j'avais déjà fait :

Les liens :

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
 <li>
                                <a href="nouveau.php#[1]"><img width="90" height="60" src="photos/caption/rubis_min.JPG" title="" /></a>
                                <h5><a href="nouveau.php#[1]"></h5>
                                <p class="info">Pierre Rose</p>
                        </li>
                        <li>
                                <a href="nouveau.php#[2]"><img width="90" height="60" src="photos/caption/saphir_min.JPG" title="" /></a>
                                <h5><a href="nouveau.php#[2]"></h5>
                                <p class="info">Pierre bleue</p>
                        </li>
                        <li>
                                <a href="nouveau.php#[4]"><img width="90" height="60" src="photos/caption/saphir2_min.JPG" title="" /></a>
                                <h5><a href="nouveau.php#[4]">Saphir taillé</a></h5>
                                <p class="info">Pïerre bleue</p>
                        </li>
                        <li>
                                <a href="nouveau.php#[5]"><img width="90" height="60" src="photos/caption/saphir3_min.JPG" title="" /></a>
                                <h5><a href="nouveau.php#[5]">Saphir Brut</a></h5>
                                <p class="info">Pierre bleue</p>
                        </li>
                        <li>
                                <a href="nouveau.php#[3]"><img width="90" height="60" src="photos/caption/vert_min.JPG" title="" /></a>
                                <h5><a href="nouveau.php#[3]">Vert</a></h5>
                                <p class="info">Pierre verte</p>
                        </li>
                        <li>
                                <a href="nouveau.php#[6]"><img width="90" height="60" src="photos/caption/whiskey_min.JPG" title="" /></a>
                               <h5><<a href="nouveau.php#[6]">Whiskey</a></h5>
                                <p class="info">Couleur Whiskey</p>
                        </li>

Les cibles:

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
<div class="cadrephoto">
    <div class="photo">
      <div class="heading"><span>Telephoto Lens</span><div class="zoom"><a href="photos/caption/rubis.jpg" rel="shadowbox" name="[1]"><img src="images/zoom.png" title="agrandir"/></a></div></div>
        <img src="photos/caption/rubis_min.jpg"/>
        <div class="caption"><span>A lens for photographing distant objects; it is designed in a compact manner so that the distance from. </span></div>
    </div>
	</div>
 
 
	<div class="cadrephoto">
    <div class="photo">
      <div class="heading"><span>Telephoto Lens</span><div class="zoom"><a href="photos/caption/saphir.jpg" rel="shadowbox" name="[2]"><img src="images/zoom.png" title="agrandir"/></a></div></div>
        <img src="photos/caption/saphir_min.jpg"/>
        <div class="caption"><span>A lens for photographing distant objects; it is designed in a compact manner so that the distance from. </span></div>
    </div>
	</div>
 
 
	<div class="cadrephoto">
    <div class="photo">
      <div class="heading"><span>Telephoto Lens</span><div class="zoom"><a href="photos/caption/vert.jpg" rel="shadowbox" name="[3]"><img src="images/zoom.png" title="agrandir"/></a></div></div>
        <img src="photos/caption/vert_min.jpg"/>
        <div class="caption"><span>A lens for photographing distant objects; it is designed in a compact manner so that the distance from. </span></div>
    </div>
	</div>
 
 
	<div class="cadrephoto">
    <div class="photo">
      <div class="heading"><span>Telephoto Lens</span><div class="zoom"><a href="photos/caption/saphir2.jpg" rel="shadowbox" name="[4]"><img src="images/zoom.png" title="agrandir"/></a></div></div>
        <img src="photos/caption/saphir2_min.jpg"/>
        <div class="caption"><span>A lens for photographing distant objects; it is designed in a compact manner so that the distance from. </span></div>
    </div>
	</div>
 
 
	<div class="cadrephoto">
    <div class="photo">
      <div class="heading"><span>Telephoto Lens</span><div class="zoom"><a href="photos/caption/saphir3.jpg" rel="shadowbox" name="[5]"><img src="images/zoom.png" title="agrandir"/></a></div></div>
        <img src="photos/caption/saphir3_min.jpg"/>
        <div class="caption"><span>A lens for photographing distant objects; it is designed in a compact manner so that the distance from. </span></div>
    </div>
	</div>
 
 
	<div class="cadrephoto">
    <div class="photo">
      <div class="heading"><span>Telephoto Lens</span><div class="zoom"><a href="photos/caption/whisky.jpg" rel="shadowbox" name="[6]"><img src="images/zoom.png" title="agrandir"/></a></div></div>
        <img src="photos/caption/whisky_min.jpg"/>
        <div class="caption"><span>A lens for photographing distant objects; it is designed in a compact manner so that the distance from. </span></div>
    </div>
	</div>

Merci pour ton aide.

**winow** · 15/01/2011, 22h34

Je viens de tester ton code sur un serveur Apache et ca marche nikel, j'ai rajouté plein d'ancre sur la page php et ca me renvoie bien a l'ancre prevu (l'ancre 16 en milieu de page pour moi).
la page 1.html

Code :

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

1
2
3
4
 
<a href="http://localhost/monsite/test/nouveau.php#[16]"><img width="90" height="60" src="photos/caption/rubis_min.JPG" title="" /></a>
                                <h5><a href="http://localhost/monsite/test/nouveau.php#[16]"></h5>
                                <p class="info">Pierre Rose</p>

la page nouveau.php

Code :

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

1
2
3
4
5
6
7
 
	<div class="cadrephoto">
    <div class="photo">
      <div class="heading"><span>Telephoto Lens</span><div class="zoom"><a href="photos/caption/whisky.jpg" rel="shadowbox" name="[16]"><img src="images/zoom.png" title="agrandir"/></a></div></div>
        <img src="photos/caption/whisky_min.jpg"/>
        <div class="caption"><span>16 16 16 16 16 16 16 16 16 16 16 16 16 16 16 16 16 16 16 16 16 16 16 16 16. </span></div>
    </div>

**brisso** · 15/01/2011, 22h53

Merci winow pour ton aide.
A vrai dire je n'ai pas du différence entre code et le miens...
Qu'entend tu par ajouter plein d'ancre ?
Voici le site en question : http://b-website.com/template/

Les liens sont à gauche ds le menu déroulant jquery.

**brisso** · 15/01/2011, 23h21

J'ai oublié de préciser qu'actuellement le nombre "d'items" n'est pas assez conséquent pour ce rendre compte de l'utilité mais à moyen terme les pierre serons séparées en différentes catégories et serons bien plus nombreuses.

Je me demandais donc avec un petit javascript bien pensé si on ne pourrait pas, en fonction du lien sélectionner, rediriger vers tel ou tel catégorie via in DIV id par exemple.

Je ne m'y connais pas suffisamment mais je pense qu'en faisait un truc du style on récupère le name du lien qui est associé à l'id de la page en question et on pointe dessus. On répète le truc if else et finalement tout prend sa place doucement.

???

certainement faisable en php d'ailleurs (mais je ne m'y connais pas suffisamment non plus...)

Liens vers des zones d'une page non courante

HTML

Discussions similaires

Partager

Partager