javascript - associating image path with title on the front end -
i'd display images , respective titles when mouses on matching class year.
with help, i've been able display images based on class year... need titles underneath. php , database, can fetch database fields... i'm working solely javascript here.
i'm trying achieve this:
<html> <head> <script src="jquery.js"></script> <script type="text/javascript"> var classes = { 2011: [ "/name1.jpg", "name 1", "/name2.jpg", "name 2"], 2012: [ "/name3.jpg", "name 3", "/name4.jpg", "name 4"], 2013: [ "/name5.jpg", "name 5", "/name6.jpg", "name 6"] }; jquery(document).ready(function($){ $('li').on('mouseover', function(e){ $('#overlay').empty(); var title = $('<h2>'); title.text('class of ' + e.target.id); $('#overlay').append(title); $(classes[e.target.id]).each(function(idx, entry){ var img = $('<img/>'); img.attr('src', entry); $('#overlay').append(img); }); }); }); </script> </head> <body> <ul id="classes"> <br> <li id="2011">class of 2011</li> <li id="2012">class of 2012</li> <li id="2013">class of 2013</li> </ul> <div id="overlay"></div> </body> </html>
your arrays oddly structured. might should change them like
var classes = { 2011: [ {src:"/name1.jpg", title:"name 1"}, {src:"/name2.jpg", title:"name 2"} ], 2012: … } with current structure, loop should this:
var arr = classes[e.target.id]; (var i=0; i<arr.length; i+=2) $('#overlay').append( $('<img/>', {'src': arr[i], 'alt': arr[i+1]}), $('<p/>', {'text': arr[i+1]}) // or );
Comments
Post a Comment