Javascript-форум - Вывод изо в видимой области экрана

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

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

- - Вывод изо в видимой области экрана (https://javascript.ru/forum/jquery/42186-vyvod-izo-v-vidimojj-oblasti-ehkrana.html)

Dozentos

16.10.2013 15:08

Вывод изо в видимой области экрана

Реализовано появление увеличенной копии изо при наведении на него курсора мыши.
Стоит задача: показывать эту копию только в видимой области экрана.

Логика такая: берём текущие координаты курсора (e.pageX и e.pageY), прибавляем к ним значение ширины и высоты нового блока соответственно и делаем выводы:
Если новое значение меньше ширины (высоты) экрана выводим новый блок в позиции курсора;
Если больше - получаем координаты позиции курсора минус ширина (высота) нового блока и смотрим:
Если новая координата больше 0 - выводим в ней новый блок;
Если меньше - делаем её равной 0...

На практике реализовал так:
left_coor = (e.pageX+$('#preview').width())>$(window).width() ? e.pageX - $('#preview').width() : e.pageX;
top_coor = (e.pageY+$('#preview').height())>$(window).height( ) ? e.pageY - $('#preview').height() : e.pageY;
left_coor = left_coor < 0 ? 0 : left_coor;
top_coor = top_coor < 0 ? 0 : top_coor;

Для ширины всё работает изумительно, а вот с высотой не так...
При наведении курсор мыши дрожит и ничего не выводится... порой выводится, только новое окно уходит как за верхнюю, так и за нижнюю границы экрана...

Подскажите, где туплю???

ksa	16.10.2013 15:16

Цитата:

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

Подскажите, где туплю?

Сделай нормальный тестовый пример.

Dozentos

16.10.2013 15:34

Вот полный код функции выводящей увеличенную копию:

this.imagePreview = function(){
	
	$("a.preview").hover(function(e){
		this.t = this.title;
		this.title = "";	
		var c = (this.t != "") ? "<br/>" + this.t : "";
		$("body").append("<p id='preview'><img src='"+ this.id +"' />"+ c +"</p>");								         
		
		left_coor = (e.pageX+$('#preview').width())>$(window).width() ? e.pageX - $('#preview').width() : e.pageX;
		top_coor = (e.pageY+$('#preview').height())>$(window).height() ? e.pageY - $('#preview').height() : e.pageY;
		left_coor = left_coor < 0 ? 0 : left_coor;
		top_coor = top_coor < 0 ? 0 : top_coor;
		
		$("#preview")
			.css("top",top_coor + "px")
			.css("left",left_coor + "px")
			.fadeIn("fast");						
    },
	function(){
		this.title = this.t;	
		$("#preview").remove();
    });	
	$("a.preview").mousemove(function(e){
		left_coor = (e.pageX+$('#preview').width())>$(window).width() ? e.pageX - $('#preview').width() : e.pageX;
		top_coor = (e.pageY+$('#preview').height())>$(window).height() ? e.pageY - $('#preview').height() : e.pageY;
		left_coor = left_coor < 0 ? 0 : left_coor;
		top_coor = top_coor < 0 ? 0 : top_coor;
		$("#preview")
			.css("top",top_coor + "px")
			.css("left",left_coor + "px");
	});			
};

ksa	16.10.2013 15:38

Цитата:

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

Вот полный код функции выводящей увеличенную копию

Ты понимаешь что есть тестовый пример? :)

рони	16.10.2013 15:42

центрирование в видимой области

:write: скролим кликаем по картинке и она всегда в центре ...

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8" />
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <style type="text/css">
  body{
    height: 1000px;
  }

  </style>
<script>
jQuery.fn.center = function()
	{
	var w = $(window);
	this.css("position","absolute");
	this.css("top",(w.height()-this.height())/2+w.scrollTop() + "px");
	this.css("left",(w.width()-this.width())/2+w.scrollLeft() + "px");
	return this;
	}
function creatOverlay(){
  $(this).center()
}
$(document).on({"click": creatOverlay}, "img")
</script>
</head>
<body>
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt="" >
</body>
</html>

Dozentos

16.10.2013 15:46

ksa,
вам скинуть ссылку на ресурс, чтоб можно было посмотреть как "троит"???
Если нет, то я не понимаю, что такое "тестовый пример".

ksa	16.10.2013 15:47

Цитата:

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

я не понимаю, что такое "тестовый пример"

Его за тебя сделал рони...

Dozentos

16.10.2013 15:48

рони,
мне картинка нужна не в центре. Нужно чтоб курсор всегда её касался.
Но всё равно спасибо, сейчас разберу ваш код, - может шо полезное для своей задачи и усвою.

Dozentos

16.10.2013 15:57

Может это тестовый пример?

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Гостиницы мира</title>
<script type="text/javascript" src="../js/jquery-1.9.1.min.js"> </script>
<script type="text/javascript" src="js/big_img.js"> </script>
<script language='javascript'>

$(document).ready(function(){
	imagePreview();
});
</script>
</head>

<body>
           <a href='javascript: void(null)' id="../mini/creative-advert-print-01.jpg" class="preview"><img src="../php_functions/resizer.php?pic=../mini/creative-advert-print-01.jpg&max=50" /></a>
           <a href='javascript: void(null)' id="../mini/creative-advert-print-02.jpg" class="preview"><img src="../php_functions/resizer.php?pic=../mini/creative-advert-print-02.jpg&max=50" /></a>
           <a href='javascript: void(null)' id="../mini/creative-advert-print-04.jpg" class="preview"><img src="../php_functions/resizer.php?pic=../mini/creative-advert-print-04.jpg&max=50" /></a>
           <a href='javascript: void(null)' id="../mini/creative-advert-print-05.jpg" class="preview"><img src="../php_functions/resizer.php?pic=../mini/creative-advert-print-05.jpg&max=50" /></a>
           <a href='javascript: void(null)' id="../mini/creative-advert-print-07.jpg" class="preview"><img src="../php_functions/resizer.php?pic=../mini/creative-advert-print-07.jpg&max=50" /></a>
           <a href='javascript: void(null)' id="../mini/creative-advert-print-09.jpg" class="preview"><img src="../php_functions/resizer.php?pic=../mini/creative-advert-print-09.jpg&max=50" /></a>
           <a href='javascript: void(null)' id="../mini/creative-advert-print-12.jpg" class="preview"><img src="../php_functions/resizer.php?pic=../mini/creative-advert-print-12.jpg&max=50" /></a>
</body>
</html>

ksa	16.10.2013 16:02

Цитата:

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

Может это тестовый пример?

Уже лучше... :yes:
Но он не полный :(

Цитата:

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

../php_functions/resizer.php?pic=../mini/creative-advert-print-01.jpg&max=50

Это твой частный случай...
Если это запустить тут или скопипастить себе - ничего не грузанется...

ksa	16.10.2013 16:03

Цитата:

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

js/big_img.js

Это так же отсутствует... :)

Dozentos

16.10.2013 16:12

Тогда пусть так будет!

<head>
<meta charset="utf-8">
<title>Гостиницы мира</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"> </script>
<script language='javascript'>
this.imagePreview = function(){
	
	$("a.preview").hover(function(e){
		this.t = this.title;
		this.title = "";	
		var c = (this.t != "") ? "<br/>" + this.t : "";
		$("body").append("<p id='preview'><img src='"+ this.id +"' />"+ c +"</p>");								         
		
		left_coor = (e.pageX+$('#preview').width())>$(window).width() ? e.pageX - $('#preview').width() : e.pageX;
		top_coor = (e.pageY+$('#preview').height())>$(window).height() ? e.pageY - $('#preview').height() : e.pageY;
		left_coor = left_coor < 0 ? 0 : left_coor;
		top_coor = top_coor < 0 ? 0 : top_coor;
		
		$("#preview")
			.css("top",top_coor + "px")
			.css("left",left_coor + "px")
			.fadeIn("fast");						
    },
	function(e){
		this.title = this.t;	
		$("#preview").remove();
    });	
	$("a.preview").mousemove(function(){
		left_coor = (e.pageX+$('#preview').width())>$(window).width() ? e.pageX - $('#preview').width() : e.pageX;
		top_coor = (e.pageY+$('#preview').height())>$(window).height() ? e.pageY - $('#preview').height() : e.pageY;
		left_coor = left_coor < 0 ? 0 : left_coor;
		top_coor = top_coor < 0 ? 0 : top_coor;
		$("#preview")
			.css("top",top_coor + "px")
			.css("left",left_coor + "px");
	});			
};

$(document).ready(function(){
	imagePreview();
});
</script>
<style>
#preview{
	position:absolute;
	border:1px solid #ccc;
	background:#FFF;
	padding:5px;
	display:none;
	color:#03F;
}
.block{
	min-height: 400px;
}
</style>
</head>

<body>
<div class='block'>gbgfgfb</div>
           <a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50'  /></a>
           <a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50'  /></a>
           <a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50'  /></a>
           <a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50'  /></a>
           <a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50'  /></a>
           <a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50'  /></a>
           <a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50'  /></a>
           <a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50'  /></a>
           <a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50'  /></a>
           <a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50'  /></a>
           <a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50'  /></a>
           <a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50'  /></a>
           <a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50'  /></a>
           <a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50'  /></a>
<div class='block'>gbgfgfb</div>
</body>

ksa	16.10.2013 16:15

Цитата:

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

../js/jquery-1.9.1.min.js

Красотулечку пропустил... (с) :D

Dozentos

16.10.2013 16:22

Совсем забыл <style> дописать. Я поправил.

Dozentos

16.10.2013 16:27

http://code.jquery.com/jquery-latest.js
Тоже вставил на место.

Dozentos

16.10.2013 16:29

Теперь пример точно рабочий. Можно скопипастить себе и посмотреть (как отсюда лелать шоб запускался - я не обучен).
Только для полной наглядности блок с изо нужно бы по странице поскролить. Если надо - я внесу необходимые изменения. Вы только скажите.

ksa	16.10.2013 16:32

Цитата:

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

как отсюда лелать шоб запускался

Все тут и описано...
http://javascript.ru/formatting

Dozentos

16.10.2013 16:43

Всё запускается отсюда и скролится. Теперь поможете?

ksa	16.10.2013 16:49

Цитата:

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

Теперь поможете?

Наверное придется... :D

Вот только рабочий день уже подошел к завершению...
Но думаю желающих помочь, имея тестовый пример, прибавится. :)

Dozentos

16.10.2013 16:57

Будем надеяться..! :agree:

рони	16.10.2013 17:02

:dance: лёгким движением руки брюки превращаются ... или за курсором но в пределах видимой части экрана...

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8" />
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <style type="text/css">
  body{
    height: 2000px;
    width: 2000px;
    padding: 0px;
    margin: 0px;
  }

  </style>
<script>
jQuery.fn.center = function(event)
	{
	var w = $(window),
    top = (w.height()-this.height())+w.scrollTop(),
    left = (w.width()-this.width())+w.scrollLeft();
    this.css("position","absolute");
	this.css("top",top > event.pageY ? event.pageY : top + "px");
	this.css("left", left > event.pageX ? event.pageX : left+"px");
	return this;
	}
function creatOverlay(event){
  $("img").center(event)
}
$(document).on({"mousemove": creatOverlay},"body")
</script>
</head>
<body>
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt="" >
</body>
</html>

рони	16.10.2013 19:29

в пределах видимости

:) шортики...

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8" />
  <script src="https://code.jquery.com/jquery-latest.js"></script>
  <style type="text/css">
  body{
    height: 2000px;
    width: 2000px;
    padding: 0px;
    margin: 0px;
  }
 #preview{
	position:absolute;
	border:1px solid #ccc;
	background:#FFF;
	padding:5px;
	color:#03F;
    z-index: 100;
    display: none;
}
.block{
	min-height: 400px;
    position: relative;
    top: 300px;
    left: 350px;
}
  </style>
<script>
 jQuery.fn.center = function(event)
 {
 		var w = $(window),
 		top = (w.height()-this.outerHeight(true))+w.scrollTop() -(event.pageY+22),
 		left = (w.width()-this.outerWidth(true))+w.scrollLeft() -(event.pageX+7);
 		this.css("position", "absolute");
 		this.css("top", top > 0? event.pageY+22: (event.pageY-this.outerHeight(true)) + "px");
 		this.css("left", left> 0? event.pageX+7: (event.pageX-this.outerWidth(true))+"px");
 		return this;
 }
 $(document).ready(function ()
 		{
 				$(".block  img").mousemove(function (event)
 						{
 								$("#preview").center(event);
 						}
 				)
 				$(".block  img").mouseenter(function ()
 						{
 								$("#preview").attr({'src': $(this).parent().data('src')})
 								.stop(true, true).fadeIn()
 						}
 				)
 				$(".block  img").mouseleave(function ()
 						{
 								$("#preview").stop(true, true).fadeOut();
 						}
 				)
 		}
 )
</script>
</head>
<body>   <img id="preview" >
<div class='block'>
           <a href='javascript: void(null)' data-src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50'  /></a>
           <a href='javascript: void(null)' data-src="http://javascript.ru/img/ws_1.png" class="preview"><img src="http://javascript.ru/img/ws_1.png" width='50' height='50'  /></a>
           <a href='javascript: void(null)' data-src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50'  /></a>
           <a href='javascript: void(null)' data-src="http://javascript.ru/img/ws_1.png" class="preview"><img src="http://javascript.ru/img/ws_1.png" width='50' height='50'  /></a>
           <a href='javascript: void(null)' data-src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50'  /></a>
           <a href='javascript: void(null)' data-src="http://javascript.ru/img/ws_1.png" class="preview"><img src="http://javascript.ru/img/ws_1.png" width='50' height='50'  /></a>
           <a href='javascript: void(null)' data-src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50'  /></a>
           <a href='javascript: void(null)' data-src="http://javascript.ru/img/ws_1.png" class="preview"><img src="http://javascript.ru/img/ws_1.png" width='50' height='50'  /></a>
</div>
</body>
</html>

Dozentos

16.10.2013 23:41

Шож, никто не помог... но решение я всё же нашёл. Может пригодится кому, выложу. Вот рабочий пример:

<head>
<meta charset="utf-8">
<title>Гостиницы мира</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"> </script>
<script language='javascript'>
this.imagePreview = function(){
	
	$("a.preview").hover(function(e){
		var mouseTop = e.pageY - $(window).scrollTop();
		var mouseLeft = e.pageX - $(window).scrollLeft();
		
		this.t = this.title;
		this.title = "";	
		var c = (this.t != "") ? "<br/>" + this.t : "";
		$("body").append("<div id='preview'><img src='"+ this.id +"' />"+ c +"</div>");
		
		var imgTop = e.pageY;
		imgTop = (imgTop + $('#preview').height()) > ($(window).scrollTop() + $(window).height()) ? ($(window).scrollTop() + $(window).height()) - $('#preview').height() - 20 : imgTop;
		var imgLeft = e.pageX;
		imgLeft = (imgLeft + $('#preview').width()) > ($(window).width() + $(window).scrollLeft()) ? ($(window).scrollLeft() + $(window).width()) - $('#preview').width() - 20 : imgLeft;
				
		$("#preview").css({top: imgTop + "px",
			               left: imgLeft + "px"}).fadeIn("fast");
    },
	function(){
		this.title = this.t;	
		$("#preview").remove();
    });	
	$("a.preview").mousemove(function(e){
		var mouseTop = e.pageY - $(window).scrollTop();
		var mouseLeft = e.pageX - $(window).scrollLeft();
		var imgTop = e.pageY;
		imgTop = (imgTop + $('#preview').height()) > ($(window).scrollTop() + $(window).height()) ? ($(window).scrollTop() + $(window).height()) - $('#preview').height() - 20 : imgTop;
		var imgLeft = e.pageX;
		imgLeft = (imgLeft + $('#preview').width()) > ($(window).width() + $(window).scrollLeft()) ? ($(window).scrollLeft() + $(window).width()) - $('#preview').width() - 20 : imgLeft;
		
		$("#preview").css({top: imgTop + "px",
			               left: imgLeft + "px"});
	});			
};

$(document).ready(function(){
	imagePreview();
});
</script>
<style>
#preview{
	position:absolute;
	border:1px solid #ccc;
	background:#FFF;
	padding:5px;
	display:none;
	color:#03F;
}
.block{
	min-height: 400px;
}
</style>
</head>

<body>
<div class='block'>gbgfgfb</div>
           <a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50'  /></a>
           <a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50'  /></a>
           <a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50'  /></a>
           <a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50'  /></a>
           <a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50'  /></a>
           <a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50'  /></a>
           <a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50'  /></a>
           <a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50'  /></a>
           <a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50'  /></a>
           <a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50'  /></a>
           <a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50'  /></a>
           <a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50'  /></a>
           <a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50'  /></a>
           <a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50'  /></a>
<div class='block'>gbgfgfb</div>
</body>

рони	16.10.2013 23:54

Dozentos,

Цитата:

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

Шож, никто не помог... но решение я всё же нашёл. Может пригодится кому, выложу. Вот рабочий пример

чем вам вариант "шортики"неподошёл? да и ваш вариант скачет сам по себе да и за пределы видимой части

ksa	17.10.2013 08:25

Цитата:

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

шортики...

Ловчее работают. :yes:

Dozentos

17.10.2013 12:00

А можно про "шортики поподробнее"???

рони	17.10.2013 12:15

Цитата:

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

можно про "шортики поподробнее"???

что именно? код перед вами - если картинка невлезает справа она показывается слева от курсора также верх низ-- источник самой картинки атрибут дата в ссылке

Dozentos

17.10.2013 12:56

Простите, невнимателен. Не заметил сразу код, думал это мой вчерашний.
Сейчас разберу. Кстати, не понимаю, почему мой тестовый пример здесь работает плохо??? На реальной странице всё нормально. Вот, можете посмотреть здесь

рони	17.10.2013 13:49

Цитата:

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

На реальной странице всё нормально.

ок!вполне достаточно, хотя при известной сноровке картинка выскакивает за пределы видимой части но это мелочи ))) на картинке фото ушло в право появился нижний скролл - возможно бордюр или отступы или кто-то быстро мышкой водит ))

Dozentos

17.10.2013 15:58

Хм... моей "сноровки" на это не хватило...
В любом случае можно считать тему закрытой. Есть два варианта решения поставленной задачи: мой и "шортики". Можно использовать любой (хотя "шортики", конечно, попроще и постабильнее).
Всем большое спасибо!

Часовой пояс GMT +3, время: 17:07.