Javascript-форум - Проблема с заключение картинки в ссылку.

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

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Проблема с заключение картинки в ссылку. (https://javascript.ru/forum/dom-window/29563-problema-s-zaklyuchenie-kartinki-v-ssylku.html)

Проблема с заключение картинки в ссылку.

Не знаю, верно ли я сформулировал тему. Проблема такая: беру готовый скрипт для создания хедера-"гармошки" вот код:

<!DOCTYPE html>
<html>
<head>
    <title>Стек для слайдшоу JQuery</title>
	<meta charset="utf-8" />
    <script type="text/javascript" src="jquery-1.6.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        var cwidth = parseInt($("#container").css("width").replace("px", "")); 	// Получаем ширину контейнера с изображениями
        var img_count = $("#img_container").children().length;					// Количество изображений
        var img_width = $("#img1").width();										// Ширина одного изображения
        var divider = cwidth / img_count;			     						// Ширина полоски, выделяемой для изобржаения в отсутствии курсора мыши над контейнером
        var small_space = (cwidth - img_width) / (img_count - 1);				// Ширина полоски, выделяемой для изобржаения при наличии курсора мыши над контейнером
		var timer = null;														// Таймер 

        // Устанавливаем позиции изображений
        var cssleft = Array();							
        $("#img_container img").each(function(index) {
			// Координаты хранятся в массиве
            cssleft[index] = new Array(); 				
            // Вычисляем и устанавливаем позицию изображения при отсутстсвии курсора мыши над контейнером
            cssleft[index][0] = (index * divider) - (index * img_width);
            $(this).css("left", cssleft[index][0] + "px");

            // Вычисляем позицию изображения при наведенном на него курсоре мыши
            cssleft[index][1] = (index * small_space) - (index * img_width);

            // Вычисляем координату правого угла изобржаения
            var index2 = index;
            if (index2 == 0) {
                index2++;
            }
            cssleft[index][2] = cssleft[index2 - 1][1];
        });

        // Курсор мыши над изображением 
        $("#img_container img").mouseenter(function() {
		
			if (timer) {
				clearTimeout(timer);
				timer = null;
			}
			
			var self = this;
			
			// Таймер используется для предотвращения "дергания" при быстром перемещении куросра мыши
			// над контейнером с изображениями
			timer = setTimeout(function() { 
			
				var img_id = parseInt($(self).attr("id").replace("img", "")) - 1;

				if ($(self).attr("id") != "img1") {
					$(self).animate({ 
						left: cssleft[img_id][1] 
					}, 300);
				}                
				loopNext(self);
				loopPrev(self);
			}, 200)
			
        });

		// Когда курсор мыши покидает контейнер изображений, возвращаем все в исходное состояние
        $("#img_container").mouseleave(function() {
			if (timer){
				clearTimeout(timer);
				timer = null;
			}
			
            $("#img_container img").each(function(index) {
                $(this).animate({
                    left: cssleft[index][0]
                }, 300);
            });
        });
		
        function loopPrev(el) {
            if ($(el).prev().is("img")) {
                var imgprev_id = parseInt($(el).attr("id").replace("img", ""));

                if ($(el).prev().attr("id") != "img1") {
                    $(el).prev().animate({
                        left: cssleft[imgprev_id - 2][1]
                    }, 300);
                }
                loopPrev($(el).prev());
            }
        }

        function loopNext(el) {
            if ($(el).next().is("img")) {
                var imgnext_id = parseInt($(el).attr("id").replace("img", ""));

                $(el).next().animate({
                    left: cssleft[imgnext_id][2]
                }, 300);
                loopNext($(el).next());
            }
        }
    });
    </script>
    <style type="text/css">
    body {
        margin: 0;
        padding: 0;
        font-family: Arial, "Free Sans";
    }
    #container {
        margin: 0 auto;
        margin-top: 50px;
        width: 800px;
        height: 350px;
        overflow: hidden;
        border: 10px solid #000;
        -webkit-border-radius: .5em;
        -moz-border-radius: .5em;
        border-radius: .5em;
    }
    #img_container {
        width: 4000px;
    }
    #img_container img {
        position: relative;
        -moz-box-shadow: -5px 0 10px #000;
        -webkit-box-shadow: -5px 0 10px #000;
        box-shadow: -5px 0 10px #000;
        width: 600px;
		float: left;
		margin: 0;
	}
    #img1 { z-index: 0; }
    #img2 { z-index: 1; }
    #img3 { z-index: 2; }
    #img4 { z-index: 3; }
    #img5 { z-index: 4; }
    </style>
</head>
<body>
<div id="container">
    <div id="img_container">
        <img id="img1" src="img/01.jpg"/>
        <img id="img2" src="img/02.jpg"/>
        <img id="img3" src="img/03.jpg"/>
        <img id="img4" src="img/04.jpg"/>
        <img id="img5" src="img/05.jpg"/>
    </div>
</div>
</body>
</html>

Собственно все классно работает. Вроде более-мение разобрался как. Стал перепиливать, как мне нужно. Столкнулся с проблемой: я не могу сделать эти картинки ссылками ни одним из известных мне способов. Заключаю картинку в тег <a> - и она перестает "раскрываться", при том другие работают. Пробовал сделать её ссылкой с помощью <map> - та же ерунда. Подскажите, пожалуйста, как сделать картинки ссылками?
Помогите пожалуйста, я только начинаю js изучать.

Цитата:

Сообщение от Iktash

я не могу сделать эти картинки ссылками

<!DOCTYPE html>
<html>
<head>
    <title>Стек для слайдшоу JQuery</title>
	<meta charset="utf-8" />
    <script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        var cwidth = parseInt($("#container").css("width").replace("px", "")); 	// Получаем ширину контейнера с изображениями
        var img_count = $("#img_container").children().length;					// Количество изображений
        var img_width = $("#img1").width();										// Ширина одного изображения
        var divider = cwidth / img_count;			     						// Ширина полоски, выделяемой для изобржаения в отсутствии курсора мыши над контейнером
        var small_space = (cwidth - img_width) / (img_count - 1);				// Ширина полоски, выделяемой для изобржаения при наличии курсора мыши над контейнером
		var timer = null;														// Таймер 

        // Устанавливаем позиции изображений
        var cssleft = Array();							
        $("#img_container img").each(function(index) {
			// Координаты хранятся в массиве
            cssleft[index] = new Array(); 				
            // Вычисляем и устанавливаем позицию изображения при отсутстсвии курсора мыши над контейнером
            cssleft[index][0] = (index * divider) - (index * img_width);
            $(this).css("left", cssleft[index][0] + "px");

            // Вычисляем позицию изображения при наведенном на него курсоре мыши
            cssleft[index][1] = (index * small_space) - (index * img_width);

            // Вычисляем координату правого угла изобржаения
            var index2 = index;
            if (index2 == 0) {
                index2++;
            }
            cssleft[index][2] = cssleft[index2 - 1][1];
        });

        // Курсор мыши над изображением 
        $("#img_container img").mouseenter(function() {
		
			if (timer) {
				clearTimeout(timer);
				timer = null;
			}
			
			var self = this;
			
			// Таймер используется для предотвращения "дергания" при быстром перемещении куросра мыши
			// над контейнером с изображениями
			timer = setTimeout(function() { 
			
				var img_id = parseInt($(self).attr("id").replace("img", "")) - 1;

				if ($(self).attr("id") != "img1") {
					$(self).animate({ 
						left: cssleft[img_id][1] 
					}, 300);
				}                
				loopNext(self);
				loopPrev(self);
			}, 200)
			
        });

		// Когда курсор мыши покидает контейнер изображений, возвращаем все в исходное состояние
        $("#img_container").mouseleave(function() {
			if (timer){
				clearTimeout(timer);
				timer = null;
			}
			
            $("#img_container img").each(function(index) {
                $(this).animate({
                    left: cssleft[index][0]
                }, 300);
            });
        });
		
        function loopPrev(el) {
            if ($(el).prev().is("img")) {
                var imgprev_id = parseInt($(el).attr("id").replace("img", ""));

                if ($(el).prev().attr("id") != "img1") {
                    $(el).prev().animate({
                        left: cssleft[imgprev_id - 2][1]
                    }, 300);
                }
                loopPrev($(el).prev());
            }
        }

        function loopNext(el) {
            if ($(el).next().is("img")) {
                var imgnext_id = parseInt($(el).attr("id").replace("img", ""));

                $(el).next().animate({
                    left: cssleft[imgnext_id][2]
                }, 300);
                loopNext($(el).next());
            }
        }
    });
    </script>
    <style type="text/css">
    body {
        margin: 0;
        padding: 0;
        font-family: Arial, "Free Sans";
    }
    #container {
        margin: 0 auto;
        margin-top: 50px;
        width: 800px;
        height: 350px;
        overflow: hidden;
        border: 10px solid #000;
        -webkit-border-radius: .5em;
        -moz-border-radius: .5em;
        border-radius: .5em;
    }
    #img_container {
        width: 4000px;
    }
    #img_container img {
        position: relative;
        -moz-box-shadow: -5px 0 10px #000;
        -webkit-box-shadow: -5px 0 10px #000;
        box-shadow: -5px 0 10px #000;
        width: 600px;
		float: left;
		margin: 0;
	}
    #img1 { z-index: 0; }
    #img2 { z-index: 1; }
    #img3 { z-index: 2; }
    #img4 { z-index: 3; }
    #img5 { z-index: 4; }
    </style>
</head>
<body>
<div id="container">
<div id="img_container">
<img id="img1" src="img/01.jpg" data="http://javascript.ru/"/>
<img id="img2" src="img/02.jpg" data="http://www.google.ru/"/>
<img id="img3" src="img/03.jpg" data="http://www.google.ru/"/>
<img id="img4" src="img/04.jpg" data="http://www.google.ru/"/>
<img id="img5" src="img/05.jpg" data="http://www.google.ru/"/>
</div></div>

<script type="text/javascript">
$("#img_container img").click(function (){
  window.open($(this).attr('data'));
});
</script>

</body>
</html>

Спасибо большое. А можно пояснить?

Цитата:

Сообщение от Iktash

А можно пояснить?

<script type="text/javascript">
$("#img_container img").click(function (){
  window.open($(this).attr('data'));
});
</script>

Cтавим на клик по картинке функцию, при клике считываем атрибут data и переходим по указанному в нём url.

Здравствуйте, столкнулся с той же проблемой. Только такое решение меня не устраивает, т.к. нужно чтоб при клике срабатывал другой скрипт на открывание картинки. Подскажите есть ли какие решения? Спасибо.

ubite, вы бы по точнее пояснили...код показали...

Скрипт аккордеона тот же.
Скрипт открывания картинки fancybox:

<link rel="stylesheet" type="text/css" href="bloks/fancybox/jquery.fancybox.css">
<script type="text/javascript" src="../bloks/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../bloks/jquery/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="../bloks/fancybox/jquery.fancybox-1.2.1.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a.first").fancybox();
$("a.two").fancybox();
$("a.video").fancybox({"frameWidth":520,"frameHeig ht":400});
$("a.content").fancybox({"frameWidth":600,"frameHe ight":300});
});
</script>

<div class="drop-shadow lifted">
<a id="img" class="first" title="картинко" href="photo/1.jpg"><img src="../photo/1(1).jpg"></a>
</div>

По сути мне нужно объеденить два скрипта.