Форум Сайтостроение Веб-строительство

Рандомный Alt к картинке, ну или не рандомный. Как проще?

Jefa
На сайте с 01.02.2007
Offline
191
Jefa
1792

Приветствую всех, друзья.

Вопрос такой:

Есть 2 картинки и к каждой имеется с десяток альтернативных текстов.

Как бы попроще сделать так, чтобы при наведении поочередно на одну из картинок - текст менялся на следующий из списка, ну или рандомно.

Буду благодарен как нибудь за помощь :beer:

T
На сайте с 20.03.2007
Offline
67
Toy
#1 


<script type="text/javascript">

    var alts=new Array("alt1","alt2","alt3");

</script>

<img src="pic1.gif" alt="alt1" onmouseout="this.alt=alts[Math.floor(Math.random()*alts.length)];">

<img src="pic2.gif" alt="alt2" onmouseout="this.alt=alts[Math.floor(Math.random()*alts.length)];">
Jefa
На сайте с 01.02.2007
Offline
191
Jefa
#2

Toy, а если немного усложнить задачу.

Есть одна картинка, допустим 100х200рх.

При наведении на левую часть 100х100 будет один альт, а на правую 100х100 другой альт, и чтоб они появлялись в определенной очередности? И текстов этих будет штук 10 с каждой стороны.

Вроде как диалога.

Левая(л) привет

Правая(п) алоха

(л) как дела?

(п) хорошо

(л) пошли в кино

(п) пошли к тебе

...

итд

Надеюсь суть ясна.

T
На сайте с 20.03.2007
Offline
67
Toy
#3

Jefa, одна картинка это принципиально? Я бы сделал 2 вплотную друг к другу.

Чтобы текста выводились поочерёдно, нужно завести переменную-счётчик, которая будет увеличиваться при наводе на одну из картинок. Ну и чтобы предотвратить смену альта при повторном наводе на одну из картинок, я бы завёл ещё одну переменную, в которой бы хранил идентификатор картинки которая была под курсором последний раз.

K
На сайте с 28.12.2008
Offline
61
kud
#4
Jefa:
Toy, а если немного усложнить задачу.
Есть одна картинка, допустим 100х200рх.
При наведении на левую часть 100х100 будет один альт, а на правую 100х100 другой альт, и чтоб они появлялись в определенной очередности? И текстов этих будет штук 10 с каждой стороны.
Вроде как диалога.

Если как диалог, то можно попробовать сделать что-то вроде: 


<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

	<head>

		<title>Диалог</title>

			<style>

#picture_map {

	width:200px;

	height:100px;

	position:relative; 

	background:url('/images/картинка') no repeat;

	border:1px solid red;

	

}

#part_1 {

	position:absolute;

	width:100px;

	height:100px;

	top:0px;

	left:0px;

	border:1px solid green;

}

#part_1 span {

	position:absolute;

	top:120px;

	left:10px;

	display: block;

	background: #ccc;

	visible:none;

	border:1px dashed green;

	width:200px;

	height:30px;

}

#part_2 span {

	position:absolute;

	top:50px;

	left:110px;

	display: block;

	background: #c7c7c7;

	visible:none;

	border:1px dashed green;

	width:200px;

	height:30px;

}

#part_2 {

	position:absolute;

	width:100px;

	height:100px;

	top:0px;

	left:100px;

	border:1px solid yellow;

}

</style>

	</head>

	<body>

	

<script>

	var texts_1 = new Array("Привет","Как дела","Что делаешь");

		var texts_2 = new Array("Здоров","Нормально","Нифига");

	function showPart2() {

		var target = document.getElementById("part_2_alt");

		target.style.display = "block";

		target.innerHTML =  texts_2[Math.floor(Math.random()*texts_2.length)];

	}

	function showPart1() {

		var target = document.getElementById("part_1_alt");

		target.style.display = "block";

		target.innerHTML = texts_1[Math.floor(Math.random()*texts_1.length)];

	}

</script>



<div id = "picture_map" style = "">

	<div id = "part_1" onmouseover="showPart1(this)" onmouseout="document.getElementById('part_1_alt').style.display = 'none';">

		<span id = "part_1_alt"  style="display:none"></span>

	</div>

	<div id = "part_2" onmouseover="showPart2(this)"; onmouseout="document.getElementById('part_2_alt').style.display = 'none';">

		<span id = "part_2_alt"  style="display:none"></span>

	</div>

</div>

	

	</body>

</html>

Ставите в #picture_map бекграундом картинку которая нужна, позиционируете и преображаете бекграундом "сносочкой", #part_1 span и #part_2 span ...

А что-бы поочередно показывал, можно написать js класс типа диалог ..

S
На сайте с 27.02.2007
Offline
60
Supervisork
#5

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

Создание сайтов, документация... (http://site3k.net/), сайт нашей дизайн-студии (http://website-it.ru/)
Jefa
На сайте с 01.02.2007
Offline
191
Jefa
#6

Други, спасибо за консультации 🍻

Может кто возьмется реализовать? все исходные данные дам в привате.

Не за спасибо конечно, 100500вмз нам в помощь :)

S
На сайте с 27.02.2007
Offline
60
Supervisork
#7

ну чё, вмз уже помогло, или смельчаков нет?

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий