Уголемяване на картинки с курсор!?

kitaen · Януари 1, 2011

Здравейте,въпросът ми е как могат да се уголемяват картинки с поставяне само на курсорът върху тях?Става въпрос за статичен сайт изработен с Dreamweaver.Не владея PHP и други по-сложни езици за уеб дизайн.С Dreamweaver мисля,че не мога да го направя или поне още не съм разбрал как става.Благодаря предварително.

SexyGazar4e · Януари 2, 2011

Dreamweaver имат доста продукти, сигурно говориш за МХ (2,3,4) или там, която версия е. Говориш също така сигурно и за .html , за целта ще ти е нужен Java Script.

Dr. Epstein · Януари 2, 2011

Това за което си мислиш не е идея на PHP, a работа на Java script, нито пък Dreamweaver е критерий. Dreamweaver е нищо повече от профи инструмент за уеб-дизайн.

Ако не владееш Java script, ползвай тогава готовия framework на jQuery. Toва ми е любимо и с него стават големи пинизи. Горещо ти препоръчвам да зареждаш библиотеката от сайта на Google. По този начин само печелиш.

Твоето решение е тук и остава само да го повториш. Малко XHTML, малко CSS, малко jQuery. Достатъчен е един Notepad++.

http://stblog.tanaka.netdna-cdn.com/wp-content/themes/SohTanaka-2010/images/icon_view.png

успех

kitaen · Януари 2, 2011

Това за което си мислиш не е идея на PHP, a работа на Java script, нито пък Dreamweaver е критерий. Dreamweaver е нищо повече от профи инструмент за уеб-дизайн.

Ако не владееш Java script, ползвай тогава готовия framework на jQuery. Toва ми е любимо и с него стават големи пинизи. Горещо ти препоръчвам да зареждаш библиотеката от сайта на Google. По този начин само печелиш.

Твоето решение е тук и остава само да го повториш. Малко XHTML, малко CSS, малко jQuery. Достатъчен е един Notepad++.

http://stblog.tanaka.netdna-cdn.com/wp-content/themes/SohTanaka-2010/images/icon_view.png

успех

Благодаря за информацията-точно това имах впредвид,но може ли по-подробни инструкции,защото опитах да даунлоадвам jQuery,но се отвори страница с код и нищо не схващам как да продължа.Сайта съм го правил с Dreamweavwer8 -статични html страници в DESIGN MODE-WYSIWYG и всичко останало ми е пълна мъгла.

SexyGazar4e · Януари 3, 2011

jQuery :

Правиш си файл с разширение .xhtml и постаряш този код вътре:

<ul class="thumb">
<li><a href="#"><img src="thumb1.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb2.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb3.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb4.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb5.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb6.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb7.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb8.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb9.jpg" alt="" /></a></li>
</ul>

като всеки един ред от тези <img src="thumb1.jpg" alt="" /> посочва пътя на дадена картинка.

Примерно снимката ти се намира в папка /web и името на снимката е picture.jpg , пишеш <img src="/web/picture.jpg" alt="" /> .

.CSS :

Поставяш този код във файл с разширение .css

ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative;  /* Set the absolute positioning base coordinate */
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px; /* Set the small thumbnail size */
-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(thumb_bg.png) no-repeat center center;  /* Image used as background on hover effect
border: none; /* Get rid of border on hover */
}

.js

Това го поставяш във файл с разширешние .js

$("ul.thumb li").hover(function() {
$(this).css({'z-index' : '10'}); /*Add a higher z-index value so this image stays on top*/ 
$(this).find('img').addClass("hover").stop() /* Add class of "hover", then stop animation queue buildup*/
	.animate({
		marginTop: '-110px', /* The next 4 lines will vertically align this image */ 
		marginLeft: '-110px',
		top: '50%',
		left: '50%',
		width: '174px', /* Set new width */
		height: '174px', /* Set new height */
		padding: '20px'
	}, 200); /* this value of "200" is the speed of how fast/slow this hover animates */

} , function() {
$(this).css({'z-index' : '0'}); /* Set z-index back to 0 */
$(this).find('img').removeClass("hover").stop()  /* Remove the "hover" class , then stop animation queue buildup*/
	.animate({
		marginTop: '0', /* Set alignment back to default */
		marginLeft: '0',
		top: '0',
		left: '0',
		width: '100px', /* Set width back to default */
		height: '100px', /* Set height back to default */
		padding: '5px'
	}, 400);
});

Google.bg а тук прочети малко повече за различните видове "дизайнерски програмни езици".

Dr. Epstein · Януари 3, 2011

Благодаря за информацията-точно това имах впредвид,но може ли по-подробни инструкции,защото опитах да даунлоадвам jQuery,но се отвори страница с код и нищо не схващам как да продължа.Сайта съм го правил с Dreamweavwer8 -статични html страници в DESIGN MODE-WYSIWYG и всичко останало ми е пълна мъгла.

Няма нужда "да даунлоадвам jQuery". Явно не си ме разбрал, още повече е нормално да виждаш код при този твой опит.

Постави този код в главата на HTML документа ти и си готов с jQuery.

 <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js' type='text/javascript'></script>

Първо стиловете,после джава скриптовете!

Останалото чочко го е подсказал. Просто замени пътищата до твоите картинки и техните имена.

dudev851 · Януари 6, 2011

Значи тук по-точно говорим за DHTML и неговото приложение. Javascript е само инструмент, с който добавяш методи и променяш полета от класа. По принцип е хубаво да се знае какво се върши точно. Не като някои "ПРОГРАМИСТИ", които пишат на език от високо ниво на компютъра какво да направи - изведи това изведи онова запиши това там онова тук ... и т.н. Трябва да се знае какво се случва!!!

със id ="test" обявяваш че това(картинка или нещо друго), има ID="test". После чрез document.getElementById(Javascript), можеш да се обърнеш към него. Тоест знае се първия байт от структурата на този елемент.

Ако бях на теб, щях да се позаинтересувам какво е обектно ориентирано програмиране. И защо се използва. Каква е разликата. Какво е указател също.

kitaen · Януари 6, 2011

Няма нужда "да даунлоадвам jQuery". Явно не си ме разбрал, още повече е нормално да виждаш код при този твой опит.
Постави този код в главата на HTML документа ти и си готов с jQuery.
 <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js' type='text/javascript'></script>
Първо стиловете,после джава скриптовете!
Останалото чочко го е подсказал. Просто замени пътищата до твоите картинки и техните имена.

Първата част я схванах,зададох път към картинка в xtml страница и тя се появи,създадох и останалите документи-css и js,но не разбирам как се прави връзката между документите така,че да се получат всички тия ефекти.

dudev851 · Януари 7, 2011

По този начин нищо няма да научиш, ама карай.

Dr. Epstein · Януари 7, 2011

До kitaen

Образно казано xtml поставя конструкцията/основите. CSS дооформя визията/козметиката, но това са езици за статични неща. Нещо повече, език е само CSS, докато xtml е уеб-способ за разкройка. За повече ефекти, тоест, оживяване и динамика се добавя javascript в лицето на jQuery, което става на клиентската част, на компютъра на посетителя.

Внимателен оглед на кода показва общи имена (в случая клас - class="thumb"), а това говори за връзката и тук вече спира практическото повторение. Виж втората половина на файл.js. Там е зададена функция, а коментарите в дясно подсказват какво е тяхното действие. Това все пак е някакво начало за разбиране.

За пълно разбиране е нужна база, тоест теория, а след като я нямаш-препоръката е да се запознаеш, защото това излиза извън рамките на един отговор в форум.

поздрави

Януари 7, 2011

<!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=iso-8859-1" />
<link rel="shortcut icon" type="image/x-icon" href="http://stblog.tanaka.netdna-cdn.com/monster.ico">

<title>Soh Tanaka</title>
<style type="text/css">
body {
font: Arial, Helvetica, sans-serif normal 10px;
margin: 0; padding: 0;
}
* {margin: 0; padding: 0;}
img {border: none;}
.container {
height: 360px;
width: 910px;
margin: -180px 0 0 -450px;
top: 50%; left: 50%;
position: absolute;
}
ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative;
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px;
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
-ms-interpolation-mode: bicubic; 
}
ul.thumb li img.hover {
background:url(thumb_bg.png) no-repeat center center;
border: none;
}
#main_view {
float: left;
padding: 9px 0;
margin-left: -10px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){

//Larger thumbnail preview 

$("ul.thumb li").hover(function() {
$(this).css({'z-index' : '10'});
$(this).find('img').addClass("hover").stop()
	.animate({
		marginTop: '-110px', 
		marginLeft: '-110px', 
		top: '50%', 
		left: '50%', 
		width: '174px', 
		height: '174px',
		padding: '20px' 
	}, 200);

} , function() {
$(this).css({'z-index' : '0'});
$(this).find('img').removeClass("hover").stop()
	.animate({
		marginTop: '0', 
		marginLeft: '0',
		top: '0', 
		left: '0', 
		width: '100px', 
		height: '100px', 
		padding: '5px'
	}, 400);
});

//Swap Image on Click
$("ul.thumb li a").click(function() {
	
	var mainImage = $(this).attr("href"); //Find Image Name
	$("#main_view img").attr({ src: mainImage });
	return false;		
});

});
</script> 
</head>

<body>
<div class="container">
<ul class="thumb">

<li><a href="http://www.sohtanaka.com/web-design/examples/image-zoom/main_image1.jpg"><img src="http://www.sohtanaka.com/web-design/examples/image-zoom/thumb1.jpg" alt="" /></a></li>
<li><a href="http://www.sohtanaka.com/web-design/examples/image-zoom/main_image2.jpg"><img src="http://www.sohtanaka.com/web-design/examples/image-zoom/thumb2.jpg" alt="" /></a></li>
<li><a href="http://www.sohtanaka.com/web-design/examples/image-zoom/main_image3.jpg"><img src="http://www.sohtanaka.com/web-design/examples/image-zoom/thumb3.jpg" alt="" /></a></li>
<li><a href="http://www.sohtanaka.com/web-design/examples/image-zoom/main_image4.jpg"><img src="http://www.sohtanaka.com/web-design/examples/image-zoom/thumb4.jpg" alt="" /></a></li>
<li><a href="http://www.sohtanaka.com/web-design/examples/image-zoom/main_image5.jpg"><img src="http://www.sohtanaka.com/web-design/examples/image-zoom/thumb5.jpg" alt="" /></a></li>
<li><a href="http://www.sohtanaka.com/web-design/examples/image-zoom/main_image6.jpg"><img src="http://www.sohtanaka.com/web-design/examples/image-zoom/thumb6.jpg" alt="" /></a></li>
<li><a href="http://www.sohtanaka.com/web-design/examples/image-zoom/main_image7.jpg"><img src="http://www.sohtanaka.com/web-design/examples/image-zoom/thumb7.jpg" alt="" /></a></li>
<li><a href="http://www.sohtanaka.com/web-design/examples/image-zoom/main_image8.jpg"><img src="http://www.sohtanaka.com/web-design/examples/image-zoom/thumb8.jpg" alt="" /></a></li>
<li><a href="http://www.sohtanaka.com/web-design/examples/image-zoom/main_image9.jpg"><img src="http://www.sohtanaka.com/web-design/examples/image-zoom/thumb9.jpg" alt="" /></a></li>

</ul>
<div id="main_view">
<a href="http://www.DesignBombs.com" title="Design Bombs - Web Gallery" target="_blank"><img src="http://www.sohtanaka.com/web-design/examples/image-zoom/main_image1.jpg" alt="" /></a><br />
<small style="float: right; color: #999;">Tutorial by <a style="color: #777;" href="http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/" target="_blank">Soh Tanaka</a></small>
</div>
</div>


</body>
</html>

Маркираш, копи-пейст и Notepad с разширение .html?

Т'ва е всичко най-важно

Там където в кода имаш thumb№ са малките картинки - изображения, дето са 174 x 174 в скрипта, при пложение, че си поставил курсора на мишката в/у тях, иначе са 110 x 110, а ...image-zoom/main_image№.jpg са големите изображения в дясно, които се получват с натискане на някое от малките картинки. Скрипта е CSS и java, но най-долу са src-овете на картинките, типични са за HTML. И на мен не ми е ясен на 100% скрипта, но разбирам от HTML & CSS ...и донякъде схванах идеята.

Влез

Уголемяване на картинки с курсор!?

Препоръчан пост

kitaen

Link to comment

Сподели другаде

SexyGazar4e

Link to comment

Сподели другаде

Dr. Epstein

Link to comment

Сподели другаде

kitaen

Link to comment

Сподели другаде

SexyGazar4e

Link to comment

Сподели другаде

Dr. Epstein

Link to comment

Сподели другаде

dudev851

Link to comment

Сподели другаде

kitaen

Link to comment

Сподели другаде

dudev851

Link to comment

Сподели другаде

Dr. Epstein

Link to comment

Сподели другаде

Гост newnickname

Link to comment

Сподели другаде

Join the conversation

Разгледай

Какво ново?