Как сделать меню из 7 фото

20.07.2009, 21:57. **Показов** 2218. **Ответов** 6

Студворк — интернет-сервис помощи студентам

Люди Помогите Пожалуйста!!! искал везде нигде не нашёл.
Мне надо вставить под шапку сайта 7 фото вряд размером в 157x152 каждая и чтобы при наведении на каждое изображение оно сменялось другим + можно было тыкать и по ссылке переходить.
Помогите Пожалуйста!!!!
Напишите какой код надо вставлять =(

AnonymC · 20.07.2009, 22:11

на woweb смотрел?Раздел скрипты\ява скрипты

Добавлено через 41 секунду
только таких 2000 там

@J.Smith · 20.07.2009, 22:54

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<html> 
<head> 
<title>Смена изображения по наведению курсора</title> 
<script language="JavaScript"> 
 
function initRollovers() { 
 if (!document.getElementById) return 
  
 var aPreLoad = new Array(); 
 var sTempSrc; 
 var aImages = document.getElementsByTagName('img'); 
 
 for (var i = 0; i < aImages.length; i++) {   
  if (aImages[i].className == 'imgover') { 
   var src = aImages[i].getAttribute('src'); 
   var ftype = src.substring(src.lastIndexOf('.'), src.length); 
   var hsrc = src.replace(ftype, '_o'+ftype); 
 
   aImages[i].setAttribute('hsrc', hsrc); 
    
   aPreLoad[i] = new Image(); 
   aPreLoad[i].src = hsrc; 
    
   aImages[i].onmouseover = function() { 
    sTempSrc = this.getAttribute('src'); 
    this.setAttribute('src', this.getAttribute('hsrc')); 
   }  
    
   aImages[i].onmouseout = function() { 
    if (!sTempSrc) sTempSrc = this.getAttribute('src').replace('_o'+ftype, ftype); 
    this.setAttribute('src', sTempSrc); 
   } 
  } 
 } 
} 
 
window.onload = initRollovers; 
 </SCRIPT> 
 
 
</head> 
<body> 
<a href=http://www.google.com><img src="pic.jpg" alt="Some Image" class="imgover"></a></body>
</html>

Картинка, которая вылазит после наведения, должна иметь в конце имени _o (например в моем варианте это будет pic_o.jpg). Изменить это можно, отредактировав 17 и 30 строки.

Скажу честно, скрипт не мой. Я только

+ можно было тыкать и по ссылке переходить.

доделал
Ссылка на автора

Не по теме:

@lex, почему бы не предложить человеку вариант решения, а потом уже просветить на счет развалов разных скриптов?

21.07.2009, 01:13

я извиняюсь за свою тупость и ламерство но куда тут вписывать название фото ^^

@J.Smith · 21.07.2009, 07:31

HTML5
1
2
3
4
5
6
7
8
9
<body> 
<a href=http://www.google.com><img src="foto1.jpg" class="imgover"></a>
<a href=http://www.google.com><img src="foto2.jpg" class="imgover"></a>
<a href=http://www.google.com><img src="foto3.jpg" class="imgover"></a>
<a href=http://www.google.com><img src="foto4.jpg" class="imgover"></a>
<a href=http://www.google.com><img src="foto5.jpg" class="imgover"></a>
<a href=http://www.google.com><img src="foto6.jpg" class="imgover"></a>
<a href=http://www.google.com><img src="foto7.jpg" class="imgover"></a>
</body>

Соответственно фото, которые должны появляться при наведении мышки должны называться:

foto1_o.jpg
foto2_o.jpg
foto3_o.jpg
foto4_o.jpg
foto5_o.jpg
foto6_o.jpg
foto7_o.jpg

@BlackApricot · 21.07.2009, 12:15

Тот же эффект, но, на капельку проще.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><html><head>
<title>Смена изображения при наезде мыши, и переход при щелчке.</title>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<meta name="generator" content="CSE HTML Validator Халявной Версии">
<link rel="stylesheet" type="text/css" href="*.css">
<script type="text/javascript"></script>
</head>

<body>

<a href="http://www.google.com">
<img src="111_img/rose.jpg" alt="" id="pic1" onmouseover="imgChange(id, false)" onmouseout="imgChange(id, true)" border="0"></a>

<a href="http://www.google.com">
<img src="111_img/rose.jpg" alt="" id="pic2" onmouseover="imgChange(id, false)" onmouseout="imgChange(id, true)" border="0"></a>

</body>
</html>

А так ещё проще.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><html><head>
<title>Смена изображения при наезде мыши, и переход при щелчке.</title>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<meta name="generator" content="CSE HTML Validator Халявной Версии">
<link rel="stylesheet" type="text/css" href="*.css">
<script type="text/javascript"></script>
</head>

<body>

<a href="http://www.google.com">
<img src="111_img/rose.jpg" alt="" onmouseover="imgChange(this, false)" onmouseout="imgChange(this, true)" border="0"></a>

<a href="http://www.google.com">
<img src="111_img/rose.jpg" alt="" onmouseover="imgChange(this, false)" onmouseout="imgChange(this, true)" border="0"></a>

</body>
</html>

J.Smith, я тут немного похозяйничал, в твоём скрипте.

function initRollovers(){
if(!document.getElementById){return;};
var aPreLoad=new Array();
var sTempSrc;
//собираем в массив все теги IMG
var aImages=document.getElementsByTagName("i mg");
for(var i=0; i<aImages.length; i++){
//если у тега IMG нет атрибута CLASS со значением IMGOVER, пропускаем
if(aImages[i].className=="imgover"){//если нужный рисунок
//читаем полный путь
var src=aImages[i].getAttribute("src");
//отрезаем расширение файла, с точкой .jpg
var ftype=src.substring(src.lastIndexOf(".") , src.length);
//дописываем к имени файла ключ, по которому найдём нужный файл
var hsrc=src.replace(ftype, '_o'+ftype);
//переустанавливаем путь
aImages[i].setAttribute("hsrc", hsrc);
aPreLoad[i]=new Image();
aPreLoad[i].src=hsrc;
//меняем картинку
aImages[i].onmouseover=function(){
sTempSrc=this.getAttribute("src");
this.setAttribute("src", this.getAttribute("hsrc"));
};//end aImages[i].onmouseover=function()
//возвращаем картинку
aImages[i].onmouseout=function(){
if(!sTempSrc){
sTempSrc=this.getAttribute("src").replac e('_o'+ftype, ftype);};
this.setAttribute("src", sTempSrc);
};//end aImages[i].onmouseout=function()
};//end if(aImages[i].className=="imgover")
};//end for(var i=0; i<aImages.length; i++)
};//end function initRollovers()

@outoftime · 25.07.2009, 02:01

Если я вас верно понял:

Code
1
2
3
4
5
6
7
8
9
...
<a href="1.jpg" id="myhref1" onMouseOver(document.all.myhref1.href='1_1.jpg') onMouseOut(document.all.myhref1.href='1.jpg')><img src='1.jpg'></a>
<a href="2.jpg" id="myhref2" onMouseOver(document.all.myhref1.href='2_1.jpg') onMouseOut(document.all.myhref1.href='2.jpg')><img src='2.jpg'></a>
<a href="3.jpg" id="myhref3" onMouseOver(document.all.myhref1.href='3_1.jpg') onMouseOut(document.all.myhref1.href='3.jpg')><img src='3.jpg'></a>
<a href="4.jpg" id="myhref4" onMouseOver(document.all.myhref1.href='4_1.jpg') onMouseOut(document.all.myhref1.href='4.jpg')><img src='4.jpg'></a>
<a href="5.jpg" id="myhref5" onMouseOver(document.all.myhref1.href='5_1.jpg') onMouseOut(document.all.myhref1.href='5.jpg')><img src='5.jpg'></a>
<a href="6.jpg" id="myhref6" onMouseOver(document.all.myhref1.href='6_1.jpg') onMouseOut(document.all.myhref1.href='6.jpg')><img src='6.jpg'></a>
<a href="7.jpg" id="myhref7" onMouseOver(document.all.myhref1.href='7_1.jpg') onMouseOut(document.all.myhref1.href='7.jpg')><img src='7.jpg'></a>
...

При более обьемном меню надо автоматизировать код

Новые блоги и статьи Все статьи Все блоги /
Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .
Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .

BARTBERSERK

	Как сделать меню из 7 фото 20.07.2009, 21:57. Показов 2218. Ответов 6 Метки нет (Все метки) Люди Помогите Пожалуйста!!! искал везде нигде не нашёл. Мне надо вставить под шапку сайта 7 фото вряд размером в 157x152 каждая и чтобы при наведении на каждое изображение оно сменялось другим + можно было тыкать и по ссылке переходить. Помогите Пожалуйста!!!! Напишите какой код надо вставлять =(

AnonymC 1183 / 468 / 87 Регистрация: 23.06.2009 Сообщений: 6,390
	20.07.2009, 22:11
	на woweb смотрел?Раздел скрипты\ява скрипты Добавлено через 41 секунду только таких 2000 там 1

BARTBERSERK
	21.07.2009, 01:13
	я извиняюсь за свою тупость и ламерство но куда тут вписывать название фото ^^

@BlackApricot 288 / 131 / 4 Регистрация: 15.02.2009 Сообщений: 520
	21.07.2009, 12:15
	Тот же эффект, но, на капельку проще. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><html><head> <title>Смена изображения при наезде мыши, и переход при щелчке.</title> <meta http-equiv="Content-Type" content="text/html; charset=Windows-1251"> <meta name="generator" content="CSE HTML Validator Халявной Версии"> <link rel="stylesheet" type="text/css" href=".css"> <script type="text/javascript"><!-- function imgChange(iD, falseTrue){ if(falseTrue){document.getElementById(iD ).src="111_img/rose.jpg";} else{document.getElementById(iD).src="11 1_img/salpiglossis.jpg";}; };//end function imgChange() --></script> </head> <body> <a href="http://www.google.com"> <img src="111_img/rose.jpg" alt="" id="pic1" onmouseover="imgChange(id, false)" onmouseout="imgChange(id, true)" border="0"></a> <a href="http://www.google.com"> <img src="111_img/rose.jpg" alt="" id="pic2" onmouseover="imgChange(id, false)" onmouseout="imgChange(id, true)" border="0"></a> </body> </html> А так ещё проще. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><html><head> <title>Смена изображения при наезде мыши, и переход при щелчке.</title> <meta http-equiv="Content-Type" content="text/html; charset=Windows-1251"> <meta name="generator" content="CSE HTML Validator Халявной Версии"> <link rel="stylesheet" type="text/css" href=".css"> <script type="text/javascript"><!-- function imgChange(thiz, falseTrue){ if(falseTrue){thiz.src="111_img/rose.jpg";} else{thiz.src="111_img/salpiglossis.jpg";}; };//end function imgChange() --></script> </head> <body> <a href="http://www.google.com"> <img src="111_img/rose.jpg" alt="" onmouseover="imgChange(this, false)" onmouseout="imgChange(this, true)" border="0"></a> <a href="http://www.google.com"> <img src="111_img/rose.jpg" alt="" onmouseover="imgChange(this, false)" onmouseout="imgChange(this, true)" border="0"></a> </body> </html> J.Smith, я тут немного похозяйничал, в твоём скрипте. function initRollovers(){ if(!document.getElementById){return;}; var aPreLoad=new Array(); var sTempSrc; //собираем в массив все теги IMG var aImages=document.getElementsByTagName("i mg"); for(var i=0; i<aImages.length; i++){ //если у тега IMG нет атрибута CLASS со значением IMGOVER, пропускаем if(aImages[i].className=="imgover"){//если нужный рисунок //читаем полный путь var src=aImages[i].getAttribute("src"); //отрезаем расширение файла, с точкой .jpg var ftype=src.substring(src.lastIndexOf(".") , src.length); //дописываем к имени файла ключ, по которому найдём нужный файл var hsrc=src.replace(ftype, '_o'+ftype); //переустанавливаем путь aImages[i].setAttribute("hsrc", hsrc); aPreLoad[i]=new Image(); aPreLoad[i].src=hsrc; //меняем картинку aImages[i].onmouseover=function(){ sTempSrc=this.getAttribute("src"); this.setAttribute("src", this.getAttribute("hsrc")); };//end aImages[i].onmouseover=function() //возвращаем картинку aImages[i].onmouseout=function(){ if(!sTempSrc){ sTempSrc=this.getAttribute("src").replac e('_o'+ftype, ftype);}; this.setAttribute("src", sTempSrc); };//end aImages[i].onmouseout=function() };//end if(aImages[i].className=="imgover") };//end for(var i=0; i<aImages.length; i++) };//end function initRollovers() 1