Na jullie advies, en advies van iemand anders, ben ik gaan kijken naar andere mogelijkheden. Ik heb een scriptje gevonden waarmee ik een list kan bedienen met de pijltoetsen:
http://www.marcofolio.net...vigation_with_jquery.html
Aan deze list heb ik vervolgens met HTML5 audio toegevoegd. Ik heb het nu voor elkaar dat als een item wordt geselecteerd, het geluid te horen is. Helaas rijkt mijn javascript kennis echter niet ver genoeg om ervoor te zorgen dat hij per item een ander geluidje afspeelt (ik heb nog nooit wat met javascript gedaan
).
JavaScript:
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
69
70
71
72
73
74
75
76
| /*
* Author: Marco Kuiper (http://www.marcofolio.net/)
*/
var currentSelection = 0;
var currentUrl = '';
google.load("jquery", "1.3.1");
google.setOnLoadCallback(function()
{
// Register keypress events on the whole document
$(document).keypress(function(e) {
switch(e.keyCode) {
// User pressed "up" arrow
case 38:
navigate('up');
break;
// User pressed "down" arrow
case 40:
navigate('down');
break;
// User pressed "enter"
case 13:
if(currentUrl != '') {
window.location = currentUrl;
}
break;
}
});
// Add data to let the hover know which index they have
for(var i = 0; i < $("#menu ul li a").size(); i++) {
$("#menu ul li a").eq(i).data("number", i);
}
// Simulote the "hover" effect with the mouse
$("#menu ul li a").hover(
function () {
currentSelection = $(this).data("number");
setSelected(currentSelection);
}, function() {
$("#menu ul li a").removeClass("itemhover");
currentUrl = '';
}
);
});
function navigate(direction) {
// Check if any of the menu items is selected
if($("#menu ul li .itemhover").size() == 0) {
currentSelection = -1;
}
if(direction == 'up' && currentSelection != -1) {
if(currentSelection != 0) {
currentSelection--;
}
} else if (direction == 'down') {
if(currentSelection != $("#menu ul li").size() -1) {
currentSelection++;
}
}
setSelected(currentSelection);
}
function setSelected(menuitem) {
$("#menu ul li a").removeClass("itemhover");
$("#menu ul li a").eq(menuitem).addClass("itemhover");
currentUrl = $("#menu ul li a").eq(menuitem).attr("href");
//Geluidje afspelen
var v = document.getElementsByTagName("audio")[0];
v.play();
} |
Als je de [0] veranderd, naar 1, dan pakt hij de 2e tag waarin audio voorkomt. Op de 1 of andere manier moet dit wel te linken zijn aan het huidige menuitem, maar ik weet niet hoe
Dit lijkt me iig al een "blindvriendelijkere" oplossing, en helemaal zonder flash!
-edit-
Jeetje, ik leer iets volgens mij. Ik heb het voor elkaar per menu item een ander geluidje te spelen in html5
JavaScript:
1
| var v = document.getElementsByTagName("audio")[currentSelection]; |
Nu moet ik nog iets van een method oid maken dat het ene geluidje stopt zodra je naar het volgende menu item gaat.
Ben er bijna!
- edit 2 -
Het werkt zoals het zou moeten werken.
Alleen nu moet ik ervoor zorgen dat Jquery gewoon lokaal werkt en niet via Google. dan ben ik er!
[
Voor 14% gewijzigd door
Reb87 op 13-05-2010 14:17
]
/u/81575/smile.JPG?f=community)
:strip_exif()/u/27216/bosmonster_dropdown.gif?f=community)
/u/70160/herko-icon.png?f=community){kind=icon}
:strip_icc():strip_exif()/u/215708/crop63b8134ded7b6_cropped.jpg?f=community)
:strip_icc():strip_exif()/u/30754/tweakerslogo.jpg?f=community)
/u/102105/crop56f481fe1f74f.png?f=community)
:strip_icc():strip_exif()/u/12461/crop65b195553d948.jpg?f=community)
:strip_icc():strip_exif()/u/92368/crop67f122a4021bc.jpg?f=community)
:strip_icc():strip_exif()/u/226826/aardblij-60.jpg?f=community)
:strip_exif()/u/259931/stuiterbal2.gif?f=community)
:strip_icc():strip_exif()/u/111840/images.jpg?f=community)