jquery hover e problema selezionato - javascript, jquery, css

http://www.kars4kids.org/charity/v2/nirangahtml/program_pop/meet_animals.asp

sopra il collegamento, quando seleziono una delle icone in basso. cambia negli stati selezionati, ma il problema è che ho bisogno di limitare l'effetto hover e di selezionare ulteriormente per quell'icona (dato che sto usando il cambio delle immagini).

di seguito è riportato il mio codice jquery completo.

$(document).ready(function(){
$("#animal_content_text_horse").css("display", "block");
$("#animal_pic_horse_span").css("display", "block");
$("#page_animal_img_horse").css("display", "block");

$(".animal_thumb_link").each(function() {

$(this).click(function(e) {
e.preventDefault();
default_set($(this).attr("id"));

$(".animal_thumb_link").removeClass("thumbselected");
$(this).addClass("thumbselected");
$(".animal_thumb_link").find("img").addClass("imgHoverable");
$(this).find("img").removeClass("imgHoverable");

});

});

// Change the image of hoverable images
$(".imgHoverable").hover( function() {
var hoverImg = HoverImgOf($(this).attr("src"));
$(this).attr("src", hoverImg).hide().fadeIn(0);
}, function() {
var normalImg = NormalImgOf($(this).attr("src"));
$(this).attr("src", normalImg).show();
}
);


function HoverImgOf(filename)
{
var re = new RegExp("(.+)\.(gif|png|jpg)", "g");
return filename.replace(re, "$1_r.$2");
}
function NormalImgOf(filename)
{
var re = new RegExp("(.+)_r\.(gif|png|jpg)", "g");
return filename.replace(re, "$1.$2");
}

});

function default_set(obj12){

var arr = ["horse_content", "camel_content", "peacock_content", "goat_content", "donkey_content", "rooster_content", "sheep_content", "alpacas_content", "cynthia_content", "rabbit_content", "cow_content"];
var arr2 = ["../images/horse_thumb.gif", "../images/camel_thumb.gif", "../images/peacock_thumb.gif", "../images/goat_thumb.gif", "../images/donkey_thumb.gif", "../images/rooster_thumb.gif", "../images/sheep_thumb.gif", "../images/alpacas_thumb.gif", "../images/cynthia_thumb.gif", "../images/rabbit_thumb.gif", "../images/cow_thumb.gif"];


for ( var i = 0; i <= arr.length; i++ ) {
if ( arr[ i ] === obj12 ) {
old_url = $("#" + obj12).children("img").attr("src");
new_url = old_url.replace(/thumb/,"thumb_r");
$("#" + obj12).children("img").attr("src",new_url);
}else{
$("#" +arr[ i ]).children("img").attr("src",arr2[ i ]);
}

}



}


function load_page(obj1,obj2,obj3){
/* detect current div if so hide */
current_pagepharadiv = document.getElementById("pagepharadiv_hidden").value;
current_pageheadertext = document.getElementById("pageheadertext_hidden").value;
current_pageimage = document.getElementById("pageimage_hidden").value;

$("#" + current_pagepharadiv).css("display", "none");
$("#" + current_pageheadertext).css("display", "none");
$("#" + current_pageimage).css("display", "none");

image_hover(obj1);
image_hover(obj2);
$("#" + obj3).fadeIn("fast");

//image_hover(obj3);
//$("#" + obj1).fadeIn("fast");
//$("#" + obj2).fadeIn("fast");
document.getElementById("pagepharadiv_hidden").value = obj1;
document.getElementById("pageheadertext_hidden").value = obj2;
document.getElementById("pageimage_hidden").value = obj3;

}

puoi per favore consigliare ragazzi, Saluti!

risposte:

Mi sembra che tu stia davvero rendendo le cose più complicate di quanto debbano essere. Ecco come implementerei la pagina:

• Quadrati inferiori come div, rendono le immagini trasparenti
• Cambia il colore del quadrato inferiore usando css: hover
• Genera per intero l'intero contenuto del serverogni animale in un div: quindi hai 11 div uno dopo l'altro, invece di dover nascondere / mostrare le cose in 3 punti. Nel mio esempio di codice qui sotto presumo che abbiano la classe animal-content
• Aggiungi l'id di ciascun div superiore come attributo di dati html5 al corrispondente link del pollice

In questo modo tutto ciò che devi fare in jQuery è:

$(".animal_thumb_link").click(function() {
var topId = $(this).data("topId");
$(".animal_thumb_link").removeClass("thumbselected");
$(this).addClass("thumbselected");

$(".animal-content").toggle(function() { return this.id === topId; });
});