Focus une image en javascript

**Fenrrir** · 06/05/2014, 16h35

Bonjour, je n'arrive pas a mettre une focus sur une image. Je m'explique : j'ai un tableau html qui me permet d'afficher plusieurs images. Lorsque que je clic sur un bouton j'aimerais mettre le focus sur une de ces images. J'ai essayer avec du jquery mais cela ne fonctionne pas. Voici le code en question :

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
 
<!DOCTYPE html> 
<html>
<head>
	<title>Version Mobile</title>
 
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1"/>
 
	<link rel="stylesheet" href="jquery/jquery.mobile-1.4.2.min.css" />
	<script src="jquery/jquery-1.11.0.min.js"></script>
	<script src="jquery/jquery.mobile-1.4.2.min.js"></script>
 
	<script>
 
		$(document).ready(function(){
 
			$("#idButton").click(function(event){
 
				$("#testFocus").focus();
                         });
 
		});
 
	</script>
 
</head>
 
<body>
 
	<div style ="width: 100%; height:100%; overflow-x:scroll">
        <table>
			<tr>
				<td><img src="126/126006L93PNG" /></td>
				<td><img src="126/126007L93PNG" /></td>
				<td><img src="126/126008L93PNG" /></td>
			</tr>
			<tr>
				<td><img src="126/126003L93PNG" /></td>
				<td ><img src="126/126004L93PNG" id="testFocus"/></td>
				<td><img src="126/126005L93PNG" /></td>
			</tr>
			<tr>
				<td><img src="126/126000L93PNG" /></td>
				<td><img src="126/126001L93PNG" /></td>
				<td><img src="126/126002L93PNG" /></td>
			</tr>
 
		</table>
 
		<button id="idButton" >
		</button>
    </div>
</body>
</html>

**Watilin** · 07/05/2014, 01h59

Tu ne peux pas donner le focus à une image. Pour t'en convaincre consulte document.activeElement :

Code :

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

1
2
3
4
5
6
7
8
var lien = document.getElementsByTagName("a")[0];
var image = document.getElementsByTagName("img")[0];
 
lien.focus();
console.log(document.activeElement); // affiche le lien
 
image.focus();
console.log(document.activeElement); // affiche toujours le lien

Ce que tu peux faire en revanche, c'est placer ton image dans un lien, et donner le focus à ce dernier.

**Fenrrir** · 07/05/2014, 10h32

Merci pour ta réponse je vais regarder sa.

**SpaceFrog** · 07/05/2014, 12h53

Tu peux donner le focus à un input type image dans un form; mais pas à une balise image

A quoi servirait le focus sur un image ?
Quel est le but de la manœuvre ?

**Fenrrir** · 07/05/2014, 14h31

Et bien les différentes images formes ensemble une carte (style google map) et via un formulaire en entrant le nom d'une commune je voudrais que l'écran arrive sur l'image qui y correspond tout en gardant afficher a coté les autres images.