Question

到目前为止，我有一组图片在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>

Answer 1

以下是三个功能：

按关键字选择
选择首字母
选择相似的图片

您正在寻找这些功能吗？

＆＃13;

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/>');

＆＃13;

按关键字排序

1 个答案: