Javascript-форум - Меню на jquery, как доделать?

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Меню на jquery, как доделать? (https://javascript.ru/forum/jquery/8454-menyu-na-jquery-kak-dodelat.html)

Меню на jquery, как доделать?

Доброго времени суток. Помогите доделать меню. Сейчас все выглядит так

Вот исходный текст

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Михаил Раскат - Искуство без права на ошибку.</title>

<style type="text/css">

        h2        {clear:both;padding-top:20px;}

        ul {list-style:none;margin:0;padding:0;}

        li {float:left;width:100px; height: 584px;margin:0;padding:0;text-align:center;}

        li a {display:block;height:100%;color:#FFF;text-decoration:none;}

        li a:hover, li a:focus, li a:active {background-position:-100px 0;}

        #k a {background:url(img/menu_painting.jpg) repeat 0 0;}

        #b a {background:url(img/menu_photo.jpg) repeat 0 0;}

        #c a {background:url(img/menu_glas.jpg) repeat 0 0;}

        #d a {background:url(img/menu_museum.jpg) repeat 0 0;}

        #e a {background:url(img/menu_exgibition.jpg) repeat 0 0;}

        #f a {background:url(img/menu_about.jpg) repeat 0 0;}

        #g a {background:url(img/menu_blog.jpg) repeat 0 0;}

        #h a {background:url(img/menu_feedback.jpg) repeat 0 0;}

</style>

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>

<script type="text/javascript" src="jquery.bgpos.js"></script>

<script type="text/javascript">

$(function(){

        $('#sl a')

                .css( {backgroundPosition: "0 0"} )

                .mouseover(function(){

                        $(this).stop().animate({backgroundPosition:"(-100px 0)"}, {duration:500})

                })

                .mouseout(function(){

                        $(this).stop().animate({backgroundPosition:"(-200px 0)"}, {duration:200, complete:function(){

                                $(this).css({backgroundPosition: "0 0"})

                        }})

                })

});

</script>

</head>

<body>



<h2>Главный модуль</h2>

        <ul id="sl">

                <li id="k"><a href="#">Painting</a></li>

        <li id="b"><a href="#">Photo</a></li>

        <li id="c"><a href="#">Glas</a></li>

        <li id="d"><a href="#">Museum</a></li>

        <li id="e"><a href="#">Exgibition</a></li>

        <li id="f"><a href="#">About</a></li>

        <li id="g"><a href="#">Blog</a></li>

        <li id="h"><a href="#">Feedback</a></li>

        </ul>

</body>

</html>

Нужно чтобы вместо надписи "Главный модуль" над меню при наведении на ссылку отображалось название раздела. Это вообще реально или все переделывать?

Прикольная менюха.

Цитата:

Это вообще реально или все переделывать?

Это реально

Цитата:

Сообщение от Shaci (Сообщение 49231)

Прикольная менюха.

Это реально

Тогда подскажите как?

Теперь исходный текст такой

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Михаил Раскат - Искуство без права на ошибку.</title>

<style type="text/css">

        h2      {clear:both;padding-top:20px;}

        ul {list-style:none;margin:0;padding:0;}

        li {float:left;width:100px; height: 584px;margin:0;padding:0;text-align:center;}

        li a {display:block;height:100%;color:#FFF;text-decoration:none;}

        li a:hover, li a:focus, li a:active {background-position:-100px 0;}

        #k a {background:url(img/menu_painting.jpg) repeat 0 0;}

        #b a {background:url(img/menu_photo.jpg) repeat 0 0;}

        #c a {background:url(img/menu_glas.jpg) repeat 0 0;}

        #d a {background:url(img/menu_museum.jpg) repeat 0 0;}

        #e a {background:url(img/menu_exgibition.jpg) repeat 0 0;}

        #f a {background:url(img/menu_about.jpg) repeat 0 0;}

        #g a {background:url(img/menu_blog.jpg) repeat 0 0;}

        #h a {background:url(img/menu_feedback.jpg) repeat 0 0;}

</style>

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>

<script type="text/javascript" src="jquery.bgpos.js"></script>

<script type="text/javascript">

$(function(){

        $('#sl a')

                .css( {backgroundPosition: "0 0"} )

                .mouseover(function(){

                        $(this).stop().animate({backgroundPosition:"(-100px 0)"}, {duration:500})

                        $("#h2").html($(this).html());

                })

                .mouseout(function(){

                        $(this).stop().animate({backgroundPosition:"(-200px 0)"}, {duration:200, complete:function(){

                                $(this).css({backgroundPosition: "0 0"})                                

                        }})

                        $("#h2").html("Главный модуль");

                })

});

</script>

</head>

<body>

<h2 id="h2">Главный модуль</h2>

        <ul id="sl">

        <li id="k"><a href="#">Painting</a></li>

        <li id="b"><a href="#">Photo</a></li>

        <li id="c"><a href="#">Glas</a></li>

        <li id="d"><a href="#">Museum</a></li>

        <li id="e"><a href="#">Exgibition</a></li>

        <li id="f"><a href="#">About</a></li>

        <li id="g"><a href="#">Blog</a></li>

        <li id="h"><a href="#">Feedback</a></li>

        </ul>

</body>

</html>

как работает посмотреть можно тамже.

Как сделать так, чтобы с картинок текст убрать, а в верху выводился. Или в верху вообще картинки другие выводились (вместо надписей с названием раздела)?

Цитата:

Как сделать так, чтобы с картинок текст убрать, а в верху выводился.

Попробуйте так, текст из ссылок запихнуть в id, и:

<ul id="sl">
        <li id="k"><a id="Painting" href="#"></a></li>
        <li id="b"><a id="Photo" href="#"></a></li>
        <li id="c"><a id="Glas" href="#"></a></li>
        <li id="d"><a id="Museum" href="#"></a></li>
        <li id="e"><a id="Exgibition" href="#"></a></li>

        <li id="f"><a id="About"href="#"></a></li>
        <li id="g"><a id="Blog" href="#"></a></li>
        <li id="h"><a id="Feedback" href="#"></a></li>
        </ul>

и здесь одну строку заменить $("#h2").html($(this).html()); на $("#h2").html($(this).attr('id'));

.mouseover(function(){
                        $(this).stop().animate({backgroundPosition:"(-100px 0)"}, {duration:500})
                        $("#h2").html($(this).attr('id'));
                })

Вау! Все работает как надо. Спасибо!

А как будет выглядеть скрипт, если вместо надписей с названиями раздел мне захочется выводить картинки?

Shaci,
А зачем именно id? У всех элементов есть замечательный аттрибут title.