/ / jquery hover i wybrany problem - javascript, jquery, css

jquery hover i wybrany problem - javascript, jquery, css

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

powyższy link, kiedy wybiorę jedną z ikon poniżej. Zmienia się na wybrane stany, ale problem polega na tym, że muszę ograniczyć efekt zawisu i dalej wybierać dla tej ikony (ponieważ używam zmiany obrazu).

poniżej jest mój kompletny kod jQuery.

$(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;

}

czy możesz doradzić facetom, Twoje zdrowie!

Odpowiedzi:

2 dla odpowiedzi № 1

Wydaje mi się, że naprawdę sprawiasz, że rzeczy stają się bardziej skomplikowane, niż muszą być. Oto, w jaki sposób mogę zaimplementować stronę:

  • Dolne kwadraty jako divy, sprawiają, że obrazy są przezroczyste
  • Zmień dolny kwadratowy kolor za pomocą css: hover
  • Wygeneruj całą najwyższą zawartość na serwerze dlakażde zwierzę w dziale: tak, że masz 11 elementów div po kolei, zamiast ukrywać / pokazywać rzeczy w 3 miejscach. W poniższym przykładzie kodu zakładam, że mają klasę animal-content
  • Dodaj identyfikator każdego najwyższego elementu div jako atrybutu danych html5 do odpowiedniego odnośnika kciuka

W ten sposób wszystko, co musisz zrobić w jQuery to:

$(".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; });
});