Блог

Главная - Вопросы по программированию - Вопросы при наведении курсора мыши

Вопросы при наведении курсора мыши

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Я работаю над каким-то школьным проектом, но я действительно застрял. Предполагается, что это карта моей страны, разделенная на 8 регионов. Я хочу выделить (использовать изображение) одну область после наведения на нее курсора мыши. На данный момент видна только фоновая карта. Я могу щелкнуть по изображениям с перенаправлением, но они невидимы и даже не в правильном положении. Есть идеи? Спасибо.

 <HTML>
<HEAD>
 <script>
    $(document).ready(function(){

    // region map
    $('#regions area')
        .live('mouseover', function(){
            $('img#' $(this).attr('forReg')).show();
            return false;
        })
        .live('mouseout', function(){
            $('img#' $(this).attr('forReg')).hide();
            return false;
    });
    });
    </script>
</HEAD>
<BODY>
    <div style="position: absolute; height: 608px; width: 1225px; background-image: url('background.jpg')">
            <div style="position: absolute; height: 608px; width: 1225px; background-image: url('slovensko.png')">
                <img id="bratislava" style="position: absolute; left: 0px; top: 307px; display: none;" src="bratislava.png">
                <img id="trnava" style="position: absolute; left: 25px; top: 232px; display: none;" src="trnava.png">
                <img id="trencin" style="position: absolute; left: 119px; top: 95px; display: none;" src="trencin.png">
                <img id="nitra" style="position: absolute; left: 184px; top: 290px; display: none;" src="nitra.png">
                <img id="zilina" style="position: absolute; left: 336px; top: 0px; display: none;" src="zilina.png">
                <img id="bystrica" style="position: absolute; left: 357px; top: 219px; display: none;" src="bystrica.png">
                <img id="presov" style="position: absolute; left: 658px; top: 47px; display: none;" src="presov.png">
                <img id="kosice" style="position: absolute; left: 725px; top: 196px; display: none;" src="kosice.png">
                <img usemap="#regions" style="position: absolute" src="nazvy-krajov.png" width="1225" height="608" alt="">
                <map name="regions">
                    <area forReg="bratislava" shape="poly" coords="48,197,90,199,104,171,144,156,135,95,106,55,102,31,121,13,110,0,78,28,48,26,9,52,5,92,29,150" href="/bratislava.html">
                    <area forReg="trnava" shape="poly" coords="110,166,121,227,59,278,158,365,202,310,200,265,184,262,185,232,207,217,201,173,221,133,199,119,209,98,225,92,169,63,128,79,116,56,124,46,60,0,13,52,2,108,39,102,66,103,88,75,96,90,76,107,82,128" href="/trnava.html">
                    <area forReg="trencin" shape="poly" coords="141,199,209,268,313,189,284,148,290,119,240,120,271,91,219,0,174,10,154,94,123,95,113,126,1,171,35,222,76,206,137,229" href="/trencin.html">
                    <area forReg="nitra" shape="poly" coords="2,311,217,310,246,222,282,218,299,170,247,177,247,150,255,137,230,98,183,128,194,101,173,54,142,71,119,46,127,33,74,0,72,27,38,56,59,81,35,131,39,166,18,182,22,211,41,219,39,257" href="/nitra.html">
                    <area forReg="zilina" shape="poly" coords="135,275,139,235,267,218,352,227,354,162,298,125,301,64,271,64,234,0,191,26,173,62,129,66,127,32,39,31,0,98,44,159,46,189,15,212,71,213,67,248,98,278" href="/zilina.html">
                    <area forReg="bystrica" shape="poly" coords="215,278,223,243,247,232,312,265,387,221,427,157,392,149,403,113,368,64,380,22,270,11,248,1,198,4,180,20,117,22,112,60,71,63,24,120,1,124,20,193,56,172,78,211,66,249,94,256,121,241,113,287,174,281" href="/bystrica.html">
                    <area forReg="presov" shape="poly" coords="118,156,173,167,198,158,240,170,243,182,295,192,292,206,303,211,324,188,343,189,361,217,409,219,409,179,447,193,482,192,479,180,495,167,506,186,533,188,566,115,458,71,446,36,356,2,339,12,292,2,280,17,265,6,242,13,253,29,222,52,177,14,147,29,127,16,97,24,94,38,67,41,44,94,17,73,2,93,5,113,35,121,30,169,33,188,89,195,95,168" href="/presov.html">
                    <area forReg="kosice" shape="poly" coords="137,142,205,165,274,139,338,213,420,197,425,127,466,86,466,40,440,36,430,17,409,43,379,47,370,31,339,32,343,62,315,76,270,35,253,36,236,61,217,36,123,3,122,13,99,18,62,3,22,22,31,33,0,73,35,141,22,175,67,178,75,158" href="/kosice.html">
                </map>
            </div>
    </div>
</BODY>
</HTML>

Комментарии:

1. Посмотрите на консоль вашего браузера и посмотрите, есть ли какие-либо ошибки. Я не понимаю, куда вы включаете библиотеку jQuery здесь, если это ваш полный документ.

2. Какую версию jQuery вы используете? live устарел.

3. Вы используете неопределенный атрибут forReg . Фактически, это определено в областях, но не в теге img, на который указывает ваш селектор. И да, live устарел; вы должны использовать «вкл.»

4. Я изменил «live» на «on» и добавил идентификатор карты, как предложил пользователь3291093, и все в порядке. Неправильное позиционирование было вызвано неправильным определением координат. Большое спасибо!

Ответ №1:

 <map name="regions">

должно быть так

 <map id="regions">

при такой ссылке — $(‘#regions’)
«#» означает, что u r ссылается на идентификатор

Итак, попробуйте это… может быть, это исправит это .. может быть, в вашем коде больше проблем.

Ответ №2:

У вас указано имя карты, а не идентификатор

Вам нужно добавить:

 <map name="regions" id="regions">

Потому что вы используете # в своем javascript

Больше информации на:

здесь