Jump to content
  • 0

Замена картинки при нажатии на ссылку


art
 Share

Question

13 answers to this question

Recommended Posts

  • 0
Всем привет!

помогите пжалста осуществить сие действие.

короче на стр есть эскизы фоток, нужно чтоб при нажатии на них на той же стр открывалась увеличенная версия эскиза

art - какие идеи?

Link to comment
Share on other sites

  • 0

Вот пример слайд-шоу, правда, наверно, придется переделать или подходит?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Slideshow</title>
<script language="Javascript" type="text/javascript">
<!--
Pictures = new Array("NewAd1.jpg","NewAd2.jpg","NewAd3.jpg")
CurrentPicture = 0
function RunSlideShow(ForwardBack) {
if (document.images) {
CurrentPicture = CurrentPicture + ForwardBack
if (CurrentPicture > (Pictures.length - 1)) {
CurrentPicture = 0
}
if (CurrentPicture < 0) {
CurrentPicture = Pictures.length - 1
}
document.PictureDisplay.src=Pictures[CurrentPicture]
}
}
-->
</script>
</head>
<body>
<p align="center"><img src="NewAd1.jpg" name="PictureDisplay" width="400" height="75"/></p>
<center>
<table border="0">
<tr>
<td align="center">
<input type="button" value="Forward" onclick="RunSlideShow(1)">
<input type="button" value="Back" onclick="RunSlideShow(-1)">
</td>
</tr>
</table>
</center>
</body>
</html>

Link to comment
Share on other sites

  • 0

А вот пример с загрузкой картинки в определенную область:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Slideshow</title>
<script language="Javascript" type="text/javascript">
<!--
function Pokaz(cin) {
document.PictureDisplay.src=cin;
}
-->
</script>
</head>
<body>
<p align="center"><img src="NewAd1.jpg" name="PictureDisplay" width="400" height="75"/></p>

<img src="IMG_4823.jpg" width="30" height="30" onclick="Pokaz(this.src)">
</body>
</html>

Хотя по моему klierik уже ответил именно так как был задан вопрос.

Link to comment
Share on other sites

  • 0

Если использовался последний мой способ, то тут картинка загружается та же только в увеличенном размере. От себя хочу сказать - иногда лучше использовать одно и тоже изображение для загрузки, но это зависит от обстоятельств(например, в соотношении размеров маленького изображения и большого - иногда лучше зрительно слегка увеличить или использовать не сильно большое изображение, но засунутое в меньшие габариты).

А по поводу загрузки большего изображения(если действительно фото такое большое):

Если представить, что маленькое фото ? 021_1.gif, тогда фото большое - 021_1_big.gif.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Slideshow</title>
<script language="Javascript" type="text/javascript">
<!--
function Show(cin) {
cin = cin.replace(/b.gifb/,'_big.gif');
document.PictureDisplay.src=cin;
}
-->
</script>
</head>
<body>
<p align="center"><img src="NewAd1.jpg" name="PictureDisplay" width="400" height="75"/></p>

<img src="021_1.gif" width="30" height="30" onclick="Show(this.src)">
</body>
</html>

P.S. Можно этим же способом(через регулярные выражения - через replace) погулять с относительными путями к папкам и возможно даже не изменять названия файлов, а загружать с таким же названием, но уже из другой папки.

Link to comment
Share on other sites

  • 0

Если интересно, то советую поискать информацию по регулярные выражения(этот способ я тут и использовал) или можно поискать инфу по работе со строками(этот способ я тут не использовал, но для новичков он считается более легким - хотя я сам новичок) в JavaScript.

/.../ - все что между ними это регулярное выражение

b...b - сюда заключаем границы слова для поиска.

.gif - это расширение файла.

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

Для этого предусмотрен спец. символ - поэтому и пришлось написать .(этот спец. символ нужен для того если вдруг решил найти символ, который совпадает со спец. символом - чтобы он не работал как спец. символ(в данном случае точка)).

P.S. Как смог так объяснил. Хотя вряд ли стало понятно - это нужно найти инфу и сидеть разбираться. Может кто другой объяснит лучше чем я?

Link to comment
Share on other sites

  • 0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<style type="text/css">
.c{cursor:pointer}
</style>

<title>Slideshow</title>
<script language="Javascript" type="text/javascript">
<!--
function Show(cin) {
cin = cin.replace(/b.gifb/,'_big.gif');
document.PictureDisplay.src=cin;
}
-->
</script>
</head>
<body>
<p align="center"><img src="NewAd1.jpg" name="PictureDisplay" width="400" height="75"/></p>

<img class=c src="021_1.gif" width="30" height="30" onclick="Show(this.src)">
</body>
</html>

Link to comment
Share on other sites

  • 0
Может кто другой объяснит лучше чем я?

попробую, но не уверен что лучше...

есть Джедайская Сила. она называется регулярные выражения.

регулярное выражение - условие, по которому ищутся соответствия в текстовых строках. мощная такая весчь...

есть два синтаксиса регулярных выражений - Posix и Perl. вернее их больше, но это самые распространенные.

определения:

ограничитель - символ, начинающий и заканчивающий регулярное выражение. в примере Slyfox'а это слеш

модификатор - "инструкция" для обработчика, которая воздействует на все регулярное выражение. идет после конечного ограничителя

квантификатор - "инструкция" для обработчика, указывающая количесвто вхождений символа в строку (? - символ либо есть в этом месте в количестве адын штук, либо его нет. + - символ есть в этом месте один или более раз. * - символ либо есть любое количесвто раз, либо его нет). также квантификаторы можно применить не к одному символу, а последовательности или массиву

последовательность символов - набор символов, ограниченный скобками: (abc)

массив символов - набор символов, один из которых (или не один, в зависимости от наличия квантификаторов) должен быть в этом месте: [a-z]

в общем идем сюда

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy