I've put a set of small images to function as links (around 50 more or less) on a page. In that same page I have a content place holder to display data from the database, and I have a table saved in phpmyadmin that has a set of fields filled with data.
What I want is when the user clicks on a certain image link, the data related to that image gets retrieved into the site. So I want the data to be retrieved to match the image clicked.
I know how to retrieve data from a database using the binding pannel in dreamweaver, and I know this has to do with filtering the data retrieved but I don't know how to do it.. How can I make this process work?
If it helps I'm also using Jquery CSS and javascript in this project.
The project looks like this:
http://i725.photobucket.com/albums/ww256/flower1991a/world_zps26b7083d.png
HTML code:
it doesnt show I took a screenshot of it:
http://i725.photobucket.com/albums/ww256/flower1991a/a_zpsa138aa52.png
jQuery code:
$(document).ready(function() { // begin Ready
//...................................................
// When the form changes
$('#mapForm').change(function() {
var selectedContinent = $('#mapForm option:selected').val();
if (selectedContinent == 'ALL'){
$('a.dot').slideDown(1000);
}else{
$('a.dot[continent = "'+selectedContinent+'"]').slideDown(1000);
$('a.dot[continent != "'+selectedContinent+'"]').slideUp(1000);
}
});
//...................................................
// When a dot is clicked
$('a.dot').click(function(){
$('a.dot').removeClass('selected');
$(this).addClass('selected');
var city = '.city_detail#' + $(this).attr('city');
var htmlCode = $(city).html();
$('.detail_container').fadeOut(500, function(){
$('.detail_container .city_detail').html(htmlCode);
$('.detail_container').fadeIn(500);
});
});
// end Ready });