Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 24.06.2010, 09:48
Аватар для Skipp
.
Отправить личное сообщение для Skipp Посмотреть профиль Найти все сообщения от Skipp
 
Регистрация: 30.03.2010
Сообщений: 1,813

subzey,
В FF тоже работает, но есть минус в твоём примере, то что скролинг скочит.
__________________
.
Ответить с цитированием
  #12 (permalink)  
Старый 11.08.2011, 23:15
Новичок на форуме
Отправить личное сообщение для stas-clear Посмотреть профиль Найти все сообщения от stas-clear
 
Регистрация: 11.08.2011
Сообщений: 1

Сообщение от subzey Посмотреть сообщение
…ну и опять я влезу со своим очередным безяваскриптовым способом, просто для того, чтобы не недооценивали css.

<style type="text/css">
	.linktoggler a:target,
	.linktoggler a:last-child {
		display: block;
	}
	.linktoggler a,
	.linktoggler a:target ~ a:last-child {
		display: none
	}
</style>

<div class="linktoggler">
	<a id="i1" href="#i2"><img src="http://t1.gstatic.com/images?q=tbn:e_Btp8weovl5sM:http://kombinator.ru/files/images/%D0%98%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5%2520371_1.jpg" /></a>
	<a id="i2" href="#i3"><img src="http://t0.gstatic.com/images?q=tbn:PAasTfumv6DVTM:http://www.gandex.ru/upl/oboi/u185_7761_morskaya_volna.jpg" /></a>
	<a id="i3" href="#i4"><img src="http://t0.gstatic.com/images?q=tbn:V5QI99DfbCXimM:http://demiart.ru/tutorials/book/5/5.42.jpg" /></a>
	<a id="i4" href="#i1"><img src="http://t3.gstatic.com/images?q=tbn:NnK7XVJb8kEsNM:http://upload.wikimedia.org/wikipedia/commons/1/1b/%D0%98%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5_307.jpg" /></a>
</div>

Должно работать в Сафари, Хроме и Опере. Насчет Файрфокса — не знаю, насколько он умеет элементы HTML5.
CSS рулит
Ответить с цитированием
  #13 (permalink)  
Старый 12.08.2011, 00:42
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

subzey, картинок не вижу :/ пример не работает
Ответить с цитированием
  #14 (permalink)  
Старый 28.02.2012, 01:11
Новичок на форуме
Отправить личное сообщение для sedoy Посмотреть профиль Найти все сообщения от sedoy
 
Регистрация: 28.02.2012
Сообщений: 1

melky, всё работает

subzey подскажите пожалуйста, что сделать, чтоб картинка видна была с самого начала, а не после обновления страницы

Последний раз редактировалось sedoy, 28.02.2012 в 01:18.
Ответить с цитированием
  #15 (permalink)  
Старый 01.10.2013, 23:26
Новичок на форуме
Отправить личное сообщение для xxgxx Посмотреть профиль Найти все сообщения от xxgxx
 
Регистрация: 01.10.2013
Сообщений: 1

Подскажите пожалуйста по первому посту. Все работает как мне нужно, НО только на одно изображение на странице. как мне поместить 3-4 изображения и что-бы все так заменялись. у меня галерея и первое фото плохого качества для быстроты загрузки, а второе пожеланию при клике по нем заменяется фото лучшего качества.мой код
<script language="JavaScript">
var img1="picture/proba/kit/mas_01/P1060359.JPG";//Рисунок номер 1
var img2="picture/kit/mas_01/P10603591.JPG";//Рисунок номер 2
new Image().src="picture/kit/mas_01/P10603591.JPG";
function zamena(cl){
if(cl){
document.all.img.src="picture/kit/mas_01/P10603591.JPG";
}else{
document.all.img.src="picture/proba/kit/mas_01/P1060359.JPG";
}
}
document.write("<img name='img' src='"+img1+"' onClick='zamena(true)' >");
</script>
Ответить с цитированием
  #16 (permalink)  
Старый 05.02.2015, 09:40
Аватар для prizrac
Новичок на форуме
Отправить личное сообщение для prizrac Посмотреть профиль Найти все сообщения от prizrac
 
Регистрация: 05.02.2015
Сообщений: 3

Сообщение от subzey Посмотреть сообщение
…ну и опять я влезу со своим очередным безяваскриптовым способом, просто для того, чтобы не недооценивали css.

<style type="text/css">
	.linktoggler a:target,
	.linktoggler a:last-child {
		display: block;
	}
	.linktoggler a,
	.linktoggler a:target ~ a:last-child {
		display: none
	}
</style>

<div class="linktoggler">
	<a id="i1" href="#i2"><img src="http://t1.gstatic.com/images?q=tbn:e_Btp8weovl5sM:http://kombinator.ru/files/images/%D0%98%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5%2520371_1.jpg" /></a>
	<a id="i2" href="#i3"><img src="http://t0.gstatic.com/images?q=tbn:PAasTfumv6DVTM:http://www.gandex.ru/upl/oboi/u185_7761_morskaya_volna.jpg" /></a>
	<a id="i3" href="#i4"><img src="http://t0.gstatic.com/images?q=tbn:V5QI99DfbCXimM:http://demiart.ru/tutorials/book/5/5.42.jpg" /></a>
	<a id="i4" href="#i1"><img src="http://t3.gstatic.com/images?q=tbn:NnK7XVJb8kEsNM:http://upload.wikimedia.org/wikipedia/commons/1/1b/%D0%98%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5_307.jpg" /></a>
</div>

Должно работать в Сафари, Хроме и Опере. Насчет Файрфокса — не знаю, насколько он умеет элементы HTML5.
а как сделать чтобы не 4 картинки менялись а например 10 картинок менялось когда кликаешь на картинку
Ответить с цитированием
  #17 (permalink)  
Старый 05.02.2015, 09:43
Аватар для prizrac
Новичок на форуме
Отправить личное сообщение для prizrac Посмотреть профиль Найти все сообщения от prizrac
 
Регистрация: 05.02.2015
Сообщений: 3

а как сделать чтобы не 4 картинки менялись а например 10 картинок менялось когда кликаешь на картинку
Ответить с цитированием
  #18 (permalink)  
Старый 05.02.2015, 10:29
Аватар для prizrac
Новичок на форуме
Отправить личное сообщение для prizrac Посмотреть профиль Найти все сообщения от prizrac
 
Регистрация: 05.02.2015
Сообщений: 3

а как сделать так чтобы не 4 картинки а 10
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При клике ссылки, открыть DIV блок, и при клике ещё раз, закрыть его Simon Общие вопросы Javascript 59 28.05.2017 17:31
смена картинок при нажатии sdff Общие вопросы Javascript 15 08.02.2014 17:08
Смена картинки при перезагрузке + наведении Мария Элементы интерфейса 2 22.08.2009 14:57
Закрыть элемент при клике вне его masterm Общие вопросы Javascript 3 31.07.2009 11:27
Смена id при клике Nestor Общие вопросы Javascript 6 04.03.2009 19:10