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

art · October 12, 2007

Всем привет!

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

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

klierik · October 12, 2007

в новом окне или вместо текущей?

Slyfox · October 12, 2007

...на той же стр...

strix · October 12, 2007

Всем привет!
помогите пжалста осуществить сие действие.
короче на стр есть эскизы фоток, нужно чтоб при нажатии на них на той же стр открывалась увеличенная версия эскиза

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

klierik · October 12, 2007

<img src="sample_img.gif" onmousedown="this.src='new_image.gif'" />

ну к примеру так, если я не ошибся в синтаксисе

Slyfox · October 12, 2007

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

<!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>

Slyfox · October 12, 2007

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

<!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 уже ответил именно так как был задан вопрос.

art · October 12, 2007

Работает. Но, фотография заменяется эскизом, а не большой копией. как это организовать?

art · October 14, 2007

никто не подскажет? (

Slyfox · October 14, 2007

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

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

Если представить, что маленькое фото ? 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) погулять с относительными путями к папкам и возможно даже не изменять названия файлов, а загружать с таким же названием, но уже из другой папки.

Slyfox · October 14, 2007

никто не подскажет? (

Такой подсказки хватит?

Slyfox · October 14, 2007

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

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

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

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

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

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

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

Slyfox · October 14, 2007

<!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>

D.S.Denton · October 14, 2007

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

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

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

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

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

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

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

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

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

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

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

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

Sign In

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

Question

Link to comment

Share on other sites

13 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information