JQuery для обмена изображениями из текстовой ссылки, как ссылка на рабочее изображение - PullRequest
Новая
       23

JQuery для обмена изображениями из текстовой ссылки, как ссылка на рабочее изображение

1 голос
/ 25 февраля 2012

У меня есть несколько изображений, которые имеют функцию jquery для обмена изображениями, когда пользователь наводит на них курсор мыши. Например, следующая рабочая функция заменяет area_03.gif на area_03-over.gif и обратно, когда пользователь убирает свою мышь с изображения. Я также хотел бы разместить некоторые текстовые ссылки, которые также пролистывают соответствующие изображения, какие-либо идеи, как?

РЕДАКТИРОВАТЬ: «Функция обмена изображениями уже работает с предоставленной мною функцией. Проблема У меня возникла проблема с обменом текстовыми ссылками на работу» 

 HTML:
<!--Links --> <a href="">Another Link</a>
        <a href="nodes1-nodes21.shtml">Nodes 1 to 21</a>
        <a href="venders1-nodes5.shtml">Venders 1 to 5</a>


<!-- Images -->
        <a href="nodes1-nodes21.shtml" >
            <img class="forhover" src="images/area_03.gif" alt="Link Nodes 1 to 21" width="45" height="27"  id="area_03" />
        </a>

        <a href="venders1-nodes5.shtml" >
            <img class="forhover" src="images/area_05.gif" alt="Link Venders 1 to 5" width="45" height="27"  id="area_05" />
        </a>



Working jquery


$(document).ready(function() {
    $('img.forhover').each(function(){
    var t=$(this);
    var src1= t.attr('src'); // initial src
    var newSrc = src1.substring(0, src1.lastIndexOf('.'));; // let's get file name without extension
    t.hover(function(){
        $(this).attr('src', newSrc+ '-over.' + /[^.]+$/.exec(src1)); //last part is for extension   
        }, function(){
    $(this).attr('src', newSrc + '.' + /[^.]+$/.exec(src1)); //removing '-over' from the name
     });
    });

Ответы [ 3 ]

0 голосов
/ 25 февраля 2012

Вот решение для изображения, но не текста. 

<img src="http://i.imgur.com/vdDQgb.jpg" hoverImg="http://i.imgur.com/Epl4db.jpg">

JS: 

$('body').find('*[hoverImg]').each(function(index){
    $this = $(this)
    $this.wrap('<div>')     
    $this.parent().css('width',$this.width())  
    $this.parent().css('height',$this.width())
    $this.parent().css('background-image',"url(" + $this.attr('hoverImg')+")")
        $this.hover(function() {
            $(this).stop()
            $(this).fadeTo('',.01)    
        },function() {
            $(this).stop()
            $(this).fadeTo('',1)             
        })                    
});

Демо: http://jsfiddle.net/Diodeus/gYyBL/

0 голосов
/ 25 февраля 2012

Вы пытались использовать функцию .text () jQuery в элементе <a>?

0 голосов
/ 25 февраля 2012

Я подозреваю, что вы могли бы управлять этим с помощью функций jquery mouseenter и mouseleave

...