到目前为止，我有一组图片在2个不同的页面上来回切换。现在，我希望能够按关键字排序。我喜欢能够只用一个以字母A开头的项目来打开一个页面，或者只提供一个只有体育，只有水果等图片的团体。如果有人能指出我正确的方向开始，我会很感激它。感谢
http://readautism.atwebpages.com/ http://readautism.atwebpages.com/index1.html
<!doctype html>
<html>
<head>
<meta charset="ISO-8859-1" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>Example of How to Play a Sound on Click or on MouseOver</title>
<script>
var gStorage = {};
function toggle(anImage, anAltSrcArr) {
if (typeof(anImage) === "undefined" || typeof(anAltSrcArr) === "undefined" || anAltSrcArr.length === 0) {
return;
}
var id = anImage.id;
var oldSrc = anImage.src;
if (typeof(gStorage[id]) === "undefined") {
gStorage[id] = {
'id': id,
'origSrc': oldSrc,
'i': 0
};
}
gStorage[id].i += 1;
if (gStorage[id].i > anAltSrcArr.length) {
gStorage[id].i = 0;
}
if (gStorage[id].i === 0) {
anImage.src = gStorage[id].origSrc;
} else {
anImage.src = anAltSrcArr[gStorage[id].i - 1];
}
}
</script>
<script>
var html5_audiotypes={ //define list of audio file extensions and their associated audio types. Add to it if your specified audio file isn't on this list:
"mp3": "audio/mpeg",
"mp4": "audio/mp4",
"ogg": "audio/ogg",
"wav": "audio/wav"
}
function createsoundbite(sound){
var html5audio=document.createElement('audio')
if (html5audio.canPlayType){ //check support for HTML5 audio
for (var i=0; i<arguments.length; i++){
var sourceel=document.createElement('source')
sourceel.setAttribute('src', arguments[i])
if (arguments[i].match(/\.(\w+)$/i))
sourceel.setAttribute('type', html5_audiotypes[RegExp.$1])
html5audio.appendChild(sourceel)
}
html5audio.load()
html5audio.playclip=function(){
html5audio.pause()
html5audio.currentTime=0
html5audio.play()
}
return html5audio
}
else{
return {playclip:function(){throw new Error("Your browser doesn't support HTML5 audio unfortunately")}}
}
}
//Initialize two sound clips with 1 fallback file each:
var mouseoversound=createsoundbite("whistle.ogg", "whistle.mp3")
var clicksound=createsoundbite('http://static.sfdict.com/staticrep/dictaudio/P05/P0501900.mp3', "whistle.ogg")
var uniquevar1=createsoundbite("http://static.sfdict.com/staticrep/dictaudio/B01/B0147400.mp3")
var uniquevar2=createsoundbite("http://static.sfdict.com/staticrep/dictaudio/R01/R0153700.mp3")
var uniquevar3=createsoundbite("http://static.sfdict.com/staticrep/dictaudio/B01/B0130100.mp3")
var uniquevar4=createsoundbite("http://static.sfdict.com/staticrep/dictaudio/C02/C0298100.mp3")
var uniquevar5=createsoundbite("http://static.sfdict.com/staticrep/dictaudio/C08/C0897400.mp3")
var uniquevar6=createsoundbite("http://static.sfdict.com/staticrep/dictaudio/H00/H0020400.mp3")
var uniquevar7=createsoundbite("http://static.sfdict.com/staticrep/dictaudio/H01/H0110100.mp3")
var uniquevar8=createsoundbite("http://static.sfdict.com/staticrep/dictaudio/C05/C0578600.mp3")
var uniquevar9=createsoundbite("http://static.sfdict.com/staticrep/dictaudio/S05/S0555400.mp3")
var uniquevar10=createsoundbite("http://static.sfdict.com/staticrep/dictaudio/R04/R0433000.mp3")
var uniquevar11=createsoundbite("http://static.sfdict.com/staticrep/dictaudio/T01/T0107200.mp3")
var uniquevar12=createsoundbite("http://static.sfdict.com/staticrep/dictaudio/P02/P0230400.mp3")
var uniquevar13=createsoundbite("http://static.sfdict.com/staticrep/dictaudio/N02/N0227500.mp3")
var uniquevar14=createsoundbite("http://static.sfdict.com/staticrep/dictaudio/L00/L0050400.mp3")
var uniquevar15=createsoundbite("http://static.sfdict.com/staticrep/dictaudio/S04/S0462700.mp3")
</script>
</head>
<body
<p><CENTER><FONT SIZE = 4>DIRECTIONS: CLICK A PICTURE TO SEE WORD, THEN CLICK WORD TO SEE PICTURE AGAIN.</FONT>
<img class="with-action" id="image1" name="image1" src="bat.jpg" onclick="uniquevar1.playclip();toggle(this, ['bat1.jpg'])" STYLE="position:absolute; TOP:95px; LEFT:70px; WIDTH:175px; HEIGHT:175px"/>
<img class="with-action" id="image2" name="image2" src="refrigerator.jpg" onclick="uniquevar2.playclip();toggle(this, ['refrigerator1.jpg'])" STYLE="position:absolute; TOP:95px; LEFT:370px; WIDTH:175px; HEIGHT:175px"/>
<img class="with-action" id="image3" name="image3" src="baseball.jpg" onclick="uniquevar3.playclip();toggle(this, ['baseball1.jpg'])" STYLE="position:absolute; TOP:95px; LEFT:670px; WIDTH:175px; HEIGHT:175px"/>
<img class="with-action" id="image4" name="image4" src="chair.jpg" onclick="uniquevar4.playclip();toggle(this, ['chair1.jpg'])" STYLE="position:absolute; TOP:95px; LEFT:970px; WIDTH:175px; HEIGHT:175px"/>
<img class="with-action" id="image5" name="image5" src="couch.jpg" onclick="uniquevar5.playclip();toggle(this, ['couch1.jpg'])" STYLE="position:absolute; TOP:95px; LEFT:1270px; WIDTH:175px; HEIGHT:175px"/>
<img class="with-action" id="image6" name="image6" src="hair.jpg" onclick="uniquevar6.playclip();toggle(this, ['hair1.jpg'])" STYLE="position:absolute; TOP:395px; LEFT:70px; WIDTH:175px; HEIGHT:175px"/>
<img class="with-action" id="image7" name="image7" src="hat.jpg" onclick="uniquevar7.playclip();toggle(this, ['hat1.jpg'])" STYLE="position:absolute; TOP:395px; LEFT:370px; WIDTH:175px; HEIGHT:175px"/>
<img class="with-action" id="image8" name="image8" src="clown.jpg" onclick="uniquevar8.playclip();toggle(this, ['clown1.jpg'])" STYLE="position:absolute; TOP:395px; LEFT:670px; WIDTH:175px; HEIGHT:175px"/>
<img class="with-action" id="image9" name="image9" src="sink.jpg" onclick="uniquevar9.playclip();toggle(this, ['sink1.jpg'])" STYLE="position:absolute; TOP:395px; LEFT:970px; WIDTH:175px; HEIGHT:175px"/>
<img class="with-action" id="image10" name="image10" src="rug.jpg" onclick="uniquevar10.playclip();toggle(this, ['rug1.jpg'])" STYLE="position:absolute; TOP:395px; LEFT:1270px; WIDTH:175px; HEIGHT:175px"/>
<img class="with-action" id="image11" name="image11" src="teeth.jpg" onclick="uniquevar11.playclip();toggle(this, ['teeth1.jpg'])" STYLE="position:absolute; TOP:695px; LEFT:70px; WIDTH:175px; HEIGHT:175px"/>
<img class="with-action" id="image12" name="image12" src="pencil.jpg" onclick="uniquevar12.playclip();toggle(this, ['pencil1.jpg'])" STYLE="position:absolute; TOP:695px; LEFT:370px; WIDTH:175px; HEIGHT:175px"/>
<img class="with-action" id="image13" name="image13" src="nose.jpg" onclick="uniquevar13.playclip();toggle(this, ['nose1.jpg'])" STYLE="position:absolute; TOP:695px; LEFT:670px; WIDTH:175px; HEIGHT:175px"/>
<img class="with-action" id="image14" name="image14" src="lamp.jpg" onclick="uniquevar14.playclip();toggle(this, ['lamp1.jpg'])" STYLE="position:absolute; TOP:695px; LEFT:970px; WIDTH:175px; HEIGHT:175px"/>
<img class="with-action" id="image15" name="image15" src="shoe.jpg" onclick="uniquevar15.playclip();toggle(this, ['shoe1.jpg'])" STYLE="position:absolute; TOP:695px; LEFT:1270px; WIDTH:175px; HEIGHT:175px"/>
</p></CENTER>
</body>
</html>
答案 0 :(得分：0)
以下是三个功能：
您正在寻找这些功能吗？
var pics = [
{id:0, name: 'Pineapple', tags: ["sport", "food"], audio:'B01/B0147400.mp3', img:'chair1.jpg'},
{id:1, name: 'Venus', tags: ["sport", "planet"], audio:'B01/B0147400.mp3', img:'chair1.jpg'},
{id:2, name: 'Jupiyer', tags: ["water", "food"], audio:'B01/B0147400.mp3', img:'chair1.jpg'},
{id:3, name: 'Baseball', tags: ["color", "food"], audio:'B01/B0147400.mp3', img:'chair1.jpg'},
{id:4, name: 'Apple', tags: ["car", "planet"], audio:'B01/B0147400.mp3', img:'chair1.jpg'},
{id:5, name: 'Cloud', tags: ["plant", "sport"], audio:'B01/B0147400.mp3', img:'chair1.jpg'},
{id:6, name: 'Computer', tags: ["tree", "fruit", "stone"], audio:'B01/B0147400.mp3', img:'chair1.jpg'},
];
function select(keyword) {
return pics.filter(function(p){
return (p.tags && p.tags.indexOf(keyword)>-1);
});
}
function selectLike(pic) {
var res = {};
for(var i=0; i<pics.length;i++) {
select(pic.tags[i]).forEach(function(simpic){
res[simpic.id] = true;
});
};
delete res[pic.id];
return Object.keys(res).map(function(key){ return pics[key] });
}
function selectByLetter(letter) {
return pics.filter(function(p){
return (p.name[0].toUpperCase() == letter.toUpperCase());
});
};
function prepareAudioClips() {
pics.forEach(function(p){
p.clip = createsoundbite("http://static.sfdict.com/staticrep/dictaudio/"+p.audio)
});
}
// This is like a sceleton of the function
function generateHTMLforSimilar(arr) {
s = '';
for(var i=0;i<arr.length;i++) {
s += '<img class="with-action" id="'+arr[i].name+'" name="'+arr[i].name+'" src="'+arr[i].img+'" onclick="pics[arr.id].clip.playclip();toggle(this, [\"'+arr[i].img+'\"])" STYLE="position:absolute; float:left; WIDTH:175px; HEIGHT:175px"/>';
}
return s;
}
document.write( "<b>Like keyword:</b> ", JSON.stringify(select("food")) ,'<br/>');
document.write( "<b>Like letter:</b> ", JSON.stringify(selectByLetter("A")) ,'<br/>');
document.write( "<b>Like picture:</b> ", JSON.stringify(selectLike(pics[0])) ,'<br/>');
// prepareAudioClips(); // This wont work at SO without resource files
document.write( "<b>HTML:</b> ", generateHTMLforSimilar(selectLike(pics[0])) ,'<br/>');