LINUX.ORG.RU

a:hover в динамической менюшке


0

0

задача такая: есть динамически генерируемая менюшка ( все работает на django), нужно чтобы элемент меню ( ссылка с картинкой ) менялся на другую картнку при наведении, как это сделать трушно?

сейчас это сделано так: {%for бла-бла %} "<a href="{{link.href}}" ><img src="/media/menus/top/{{link.name}}.gif" onmouseover="this.src='/media/menus/top/{{link.name}}-over.gif'" onmouseout="this.src='/media/menus/top/{{link.name}}.gif'" alt="{{link.name}}" /></a>" {% endfor %} но дело в том что картинка грузится при наведении, а при большой латентности канала это тормозит. предзагрузку через js делать впадло

можна как-то через a:hover, но как сделать - не доходит, чтобы работало динамически.

еще есть вариант задавать фону смещение при наведени, а фоновая картинка будет хитрая.

или генерить еще один css файл динамически, или внутрь итерации засунуть <style type="text/css" > чего надо </style>?


Хе, можно сделать тупо, картинку с прозрачными частями, а потом фон менять.

zJes ★★
()

на фоновой картинке нарисовать 2 картинки - normal и hover

в a:hover прописать сдвиг фона через background-position (css)

не забыть для <a> прописать display:block

a { display: block; width: 100px; height: 20px; background: url('back.png'); }

a:hover { background-position: 0 20px; }

waker ★★★★★
()
Ответ на: комментарий от Frolic

нипонил, что в динамике? 1 раз прописываешь css нужный, и везде ставишь нужный class. более автоматом никак, imho.

waker ★★★★★
()
Ответ на: комментарий от waker

имеются в виду картинки, их название зависит от названия ссылки! вот в чем дело как видно из представленного кода django сам во время генерации дописывает путь!

Frolic
() автор топика
Ответ на: комментарий от waker

эт понятно! во первых нетрушно более 3 раз прописывать один и тот-же код! во вторых нада чтобы при наведении картинка сменялась!

Frolic
() автор топика

Т.е. извращаться через четыре жопы с хитрыми фонами, дополнительными css etc. не в падлу, а написать банальный js-скрипт в три строки для прелоадинга лень?

boombick ★★★★★
()
Ответ на: комментарий от boombick

вы з кого нас принимаете, никаких извращений! "{% for link in tMenu.links %} a:hover#link-{{link.name}} { background-repeat: no-repeat; width: 98px; height: 33px; display: block; background-image: url(/media/menus/top/{{link.name}}-over.gif); }

a#link-{{link.name}} { background-repeat: no-repeat; float: left; width: 98px; height: 33px; display: block; background-image: url(/media/menus/top/{{link.name}}.gif); }

{% endfor %}" вот и весь код

Frolic
() автор топика
Ответ на: комментарий от Frolic

Можно вот так. Добавляешь один аттрибут в body и подключаешь такой скрипт. И все будет подгружаться заранее.

<script type="text/javascript">
function preloadImages() {
var images = document.getElementsByTagName('img');
for( var i = 0; i<images.length; i++ ) {
if ( images[i].onmouseover ) preloadSrcs(images[i].onmouseover.toString())
if ( images[i].onmouseout ) preloadSrcs(images[i].onmouseout.toString())
}
}

function preloadSrcs(str) {
var matches = str.match(/\.src\s*=\s*[\'\"](.+?)[\'\"]/);
src = matches[1]
alert(src)
if ( !window.top.preloader )
window.top.preloader = {}

if ( !window.top.preloader[src] )
window.top.preloader[src] = new Image();
window.top.preloader[src].src = src;
}
</script>
<body onload="preloadImages()">

golubeff
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.