Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » В помощь вебмастеру » Замена нескольких картинок при наведении на картинку/ссылку

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки
Страницы: 1 2

Открыть новую тему     Написать ответ в эту тему

bredonosec



Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Кстати, http://forall.ru-board.com/Svarga/over_mult_cust/img/css_mouse_over.html в ИЕ тож не пашет. (ИЕ 5,0) - просто 3 картинки висят и все. никаких эффектов.  
А второй вариант - интересно. Не знал, что на голом СSS такое делать можно

Всего записей: 16044 | Зарегистр. 13-02-2003 | Отправлено: 08:53 28-01-2004
Svarga

Moderator
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
bredonosec

Цитата:
Кстати, http://forall.ru-board.com/Svarga/over_mult_cust/img/css_mouse_over.html  в ИЕ тож не  

ниже в том же посте смотри ссылку под ИЕ
 
Добавлено
Хотя посмотрел — картинки так не предзагружаются — грузятся только при наведении на элемент.
Вот интересное решение (см. пост 8AleX8):
 http://www.projectseven.com/tutorials/css_menus/list_01/  

Цитата:
Using one common picture, we don't need to switch background images. We just change the background-position. The :hover state will use the background image moved several pictures to the top (-39px in the example), the :active state will use bigger shift (-78px).  
 
#menu a {
   ...
   background: url("button.gif") top left no-repeat;
   ...
   }
#menu a:hover {
   ...
   background-position: 0 -39px;
   ...
   }
#menu a:active {
   ...
   background-position: 0 -78px;
   ...
   }
 
That's it, folks. Just one image is used (no preload is needed), state switching is as fast as possible (moving background position is much faster than replacing background image). AFAIK, it works in every CSS2 capable browser (IE5+, Mozilla, Opera, Safari etc.)  
 
Petr Stanicek [aka -pixy-] (c) 2003

оно же в действии: http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/example.html
 
Добавлено
bredonosec

Цитата:
А если кликаем на другую, нужно ли, чтоб первая картинка в исходное состояние возвращалась?    
- Ага, именно. Вдавленна только когда кнопка мыши нажата. (отпустил- вернулась к выпуклой, убрал наведение - рельеф исчез)  
 Все одно, рамка вокруг активной зоны, появляющаяся стандартно после клика, даст юзеру  

Собственно, ^это^ и есть имитация кнопки при помощи CSS...


----------
away.

Всего записей: 4161 | Зарегистр. 25-06-2002 | Отправлено: 11:48 28-01-2004
bredonosec



Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Svarga -
Цитата:
^это^ и есть имитация кнопки при помощи CSS
Эт я увидел ))  
"оно же в действии" - Ага, достал картинку, вник, думаю, пойдет! К тому же, код небольшой! Куль, можно сказать! Пасиб!!
 
 И чистое любопытство уже:
А интересно, если один эффект поставить через CSS, а второй -стандартный жабаскрипт ролловер - будут они друг другу мешать, или сработаются?


Всего записей: 16044 | Зарегистр. 13-02-2003 | Отправлено: 14:37 28-01-2004 | Исправлено: bredonosec, 14:39 28-01-2004
Svarga

Moderator
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
bredonosec

Цитата:
А интересно, если один эффект поставить через CSS, а второй -стандартный жабаскрипт ролловер - будут они друг другу мешать, или сработаются?  

в CSS — фоновая картинка, в js обычно простую используют, так что javascript сработает
А вот если сделать в скрипте замену фоновой картинки — не знаю, что позже сработает...  надо попробовать  
 
Добавлено
bredonosec
написал и JS-эмуляцию кнопок формы графикой...
сейчас что-то никуда залить не могу (связь кривая ) — чуть позже залью и ссылку выложу.

----------
away.

Всего записей: 4161 | Зарегистр. 25-06-2002 | Отправлено: 15:29 28-01-2004
Svarga

Moderator
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
фух... связь немного ожила
 
bredonosec
Имитация кнопок картинками:
http://forall.ru-board.com/Svarga/js_button/js_button_emulation.html
 
в архиве:
http://forall.ru-board.com/Svarga/js_button/js_button_emulation.rar
 
Если есть вопросы по прикрутке — спрашивай.


----------
away.

Всего записей: 4161 | Зарегистр. 25-06-2002 | Отправлено: 02:31 29-01-2004
Solenaja



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Svarga
а можно такой же скриптик, но без кликания (зачем мне лишнее )
просто смена картинки и чтобы подгружались сразу, а не при наведении.
будут всего 3 рядом стоящие картинки меняться (без привязки к координатам)
заранее сенкс

----------
Могу помочь, но только своими знаниями и ...

Всего записей: 4228 | Зарегистр. 02-09-2001 | Отправлено: 14:22 30-01-2004
Solenaja



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
в скрипте:
var imgLoaded=0
var v=document.images||null
 
// n=normal
// ov=over
// u=active
 
function init(bt){
for(var i=0;i<bt.length;i+=4){
eval(bt[i]+'= new Object()')
mkImg(bt[i]+'.n',bt[i+1])
mkImg(bt[i]+'.ov',bt[i+2])
mkImg(bt[i]+'.u',bt[i+3])
}
imgLoaded=1
}
 
function mkImg(obj,pth){
eval(obj+'=new Image();'+obj+'.src=lnk+pth')
}
 
function swp(Img,ch){
if(v){
if(0==imgLoaded)return
document[Img].src=eval(Img+'.'+ch+".src")
document[Img].st=ch
}
}
 
function uc(im){
if(v){for(var i=0;i<uc.arguments.length;i++){
v[uc.arguments[i]].src=eval(uc.arguments[i]).n.src
v[uc.arguments[i]].st='n'
}}
}
 
function stat(){if(v){for(var i=0;i<v.length;i++){v[i].st='n'}}}

 
в документе:
<SCRIPT language=JavaScript src="js/img.js"></SCRIPT>
<SCRIPT>
var lnk='pics/'
var Btns=new Array(
'A',1_01.jpg','1_02.jpg','1_01.jpg',
'B','2_01.jpg','2_02.jpg','2_01.jpg',
'C','3_01.jpg','3_02.jpg','3_01.jpg'
)
init(Btns)
</SCRIPT>
всталяю в <img>: name='A' onMouseOver="if('u'!=this.st)swp('A','ov')" onMouseOut="if(this.st&&'u'!=this.st)swp('A','n')"
...

 
При снятии с картинки курсора, картинка подгружается снова с сервера (вроде бы).
Что интересно, последняя (3-я="С") картинка не подгружается - с ней как раз всё ок - работает как надо, а вот первые 2 обращаются всё равно к серверу.
 
Добавлено
Подскажите, где что мне поменять ?!
 
Добавлено
упс
надо было ещё добавить в <BODY onLoad="stat()">  
 
Добавлено
Так ладно полпроблемы решено
 
Если на страницах (к примеру на всех что есть на сайте) нужно сделать замену при наведении, может быть было бы логично сделать какой то универсальный скриптик, чтобы не прописывать всё время в head линки на "изменяющиеся картинки" ?

----------
Могу помочь, но только своими знаниями и ...

Всего записей: 4228 | Зарегистр. 02-09-2001 | Отправлено: 20:28 30-01-2004
Svarga

Moderator
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Solenaja

Цитата:
а можно такой же скриптик, но без кликания

"...только без крыльев" © "Бриллиантовая рука"
Цитата:
будут всего 3 рядом стоящие картинки меняться (без привязки к координатам)

поподробнее можно? а то что-то смутно понимаю, что именно надо — какие картинки будут меняться при наведении на какие?
 
Добавлено
Solenaja

Цитата:
надо было ещё добавить в <BODY onLoad="stat()">  

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

Цитата:
Если на страницах (к примеру на всех что есть на сайте) нужно сделать замену при наведении, может быть было бы логично сделать какой то универсальный скриптик, чтобы не прописывать всё время в head линки на "изменяющиеся картинки" ?

можно, это bredonosec просил сделать скрипт, чтоб в js-файле ничего не менять
Подправлю.

Цитата:
 картинка подгружается снова с сервера

вроде не должны — т.к. загрузка однократно делается, а потом нигде не используется.

----------
away.

Всего записей: 4161 | Зарегистр. 25-06-2002 | Отправлено: 21:22 30-01-2004 | Исправлено: Svarga, 23:49 30-01-2004
Solenaja



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Svarga

Цитата:
вроде не должны — т.к. загрузка однократно делается, а потом нигде не используется.
когда было прописано <BODY onLoad="stat()">  стало нормлаьно всё, а без него было именно так написано выше.
 

Цитата:
поподробнее можно? а то что-то смутно понимаю, что именно надо — какие картинки будут меняться при наведении на какие?
см. выше скрипт, который переделан под мои нужды - всё работает. Это нужно было для шапки. Но так как захотелось сделать такой же эффект к другим картинкам вот и возник вопрос универсального скриптика.

----------
Могу помочь, но только своими знаниями и ...

Всего записей: 4228 | Зарегистр. 02-09-2001 | Отправлено: 23:22 30-01-2004
Svarga

Moderator
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Solenaja

Цитата:
см. выше скрипт, который переделан под мои нужды - всё работает

если тебе замена одной картинки без реакции на клик нужна, то всё намного проще:
http://forall.ru-board.com/Svarga/js_rollover_script/
(этот скрипт в архиве есть)
инструкции по нему:
http://forall.ru-board.com/Svarga/js_rollover_script/readme.html

----------
away.

Всего записей: 4161 | Зарегистр. 25-06-2002 | Отправлено: 02:55 31-01-2004
XoioX



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Вот код:
 

Цитата:
<html>  
<head>  
<title>WOscripts.com - JavaScript - NewsMenu</title>  
 
 
<style type="text/css">  
.clTopMenu       {position:absolute; width:108px; height:240px; clip:rect(0px 108px 14px 0px); layer-background-color:#ffffff; background-color:#ffffff; z-index:31; visibility:hidden;}  
.clTopMenuBottom {position:absolute; width:108px; height:1px; clip:rect(0px 108px 1px 0px); top:11; layer-background-color:#cecfce; background-color:#cecfce; z-index:2;}  
.clTopMenuText   {position:absolute; width:91px; left:5px; top:60px; font-family:arial,helvetica,sans-serif; font-size:11px; background-color:#ffffff; z-index:1;}    
</style>  
<script language="JavaScript" type="text/javascript">  
 
 
function lib_bwcheck(){ //Browsercheck (needed)  
this.ver=navigator.appVersion  
this.agent=navigator.userAgent  
this.dom=document.getElementById?1:0  
this.opera5=this.agent.indexOf("Opera 5")>-1  
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;  
this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;  
this.ie4=(document.all && !this.dom && !this.opera5)?1:0;  
this.ie=this.ie4||this.ie5||this.ie6  
this.mac=this.agent.indexOf("Mac")>-1  
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;  
this.ns4=(document.layers && !this.dom)?1:0;  
this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)  
return this  
}  
var bw=new lib_bwcheck()  
 
 
 
 
 
 
 
nPlace=0  
 
 
var nNumberOfMenus=0  
 
var nMwidth=108 //The width on the menus (set the width in the stylesheet as well)  
var nPxbetween=20 //Pixels between the menus  
var nFromleft=10 //The first menus left position  
var nFromtop=100 //The top position of the menus  
var nBgcolor='#00CC33' //The bgColor of the bottom mouseover div  
var nBgcolorchangeto='#00CC33' //The bgColor to change to  
var nImageheight=60 //The position the mouseover line div will stop at when going up!  
 
/***************************************************************************  
You shouldn't have to change anything below this  
****************************************************************************/  
//Object constructor  
function makeNewsMenu(obj,nest){  
nest=(!nest) ? "":'document.'+nest+'.'  
   this.css=bw.dom? document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+"document.layers." +obj):0;  
this.evnt=bw.dom? document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+"document.layers." +obj):0;  
this.scrollHeight=bw.ns4?this.css.document.height:this.evnt.offsetHeight  
this.moveIt=b_moveIt;this.bgChange=b_bgChange;  
this.slideUp=b_slideUp; this.slideDown=b_slideDown;  
this.clipTo=b_clipTo;  
    this.obj = obj + "Object"; eval(this.obj + "=this")  
}  
//Objects methods  
 
// A unit of measure that will be added when setting the position of a layer.  
var px = bw.ns4||window.opera?"":"px";  
 
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x+px; this.css.top=this.y+px;}  
function b_bgChange(color){this.css.backgroundColor=color; this.css.bgColor=color; this.css.background=color;}  
function b_clipTo(t,r,b,l){  
if(bw.ns4){this.css.clip.top=t; this.css.clip.right=r; this.css.clip.bottom=b; this.css.clip.left=l  
}else this.css.clip="rect("+t+"px "+r+"px "+b+"px "+l+"px)";  
}  
function b_slideUp(ystop,moveby,speed,fn,wh){  
if(!this.slideactive){  
if(this.y>ystop){  
this.moveIt(this.x,this.y-5); eval(wh)  
setTimeout(this.obj+".slideUp("+ystop+","+moveby+","+speed+",'"+fn+"','"+wh+"')",speed)  
}else{  
this.slideactive=false; this.moveIt(0,ystop); eval(fn)  
}  
}  
}  
function b_slideDown(ystop,moveby,speed,fn,wh){  
if(!this.slideactive){  
if(this.y<ystop){  
this.moveIt(this.x,this.y+5); eval(wh)  
setTimeout(this.obj+".slideDown("+ystop+","+moveby+","+speed+",'"+fn+"','"+wh+"')",speed)  
}else{  
this.slideactive=false; this.moveIt(0,ystop); eval(fn)  
}  
}  
}  
//Initiating the page, making cross-browser objects  
function newsMenuInit(){  
oTopMenu=new Array()  
zindex=10  
for(i=0;i<=nNumberOfMenus;i++){  
oTopMenu[i]=new Array()  
oTopMenu[i][0]=new makeNewsMenu('divTopMenu'+i)  
oTopMenu[i][1]=new makeNewsMenu('divTopMenuBottom'+i,'divTopMenu'+i)  
oTopMenu[i][2]=new makeNewsMenu('divTopMenuText'+i,'divTopMenu'+i)  
oTopMenu[i][1].moveIt(0,nImageheight)  
oTopMenu[i][0].clipTo(0,nMwidth,nImageheight+0,0)  
if(!nPlace) oTopMenu[i][0].moveIt(i*nMwidth+nFromleft+(i*nPxbetween),nFromtop)  
else{  
oTopMenu[i][0].moveIt(nFromleft,i*nImageheight+nFromtop+(i*nPxbetween))  
oTopMenu[i][0].css.zIndex=zindex--  
}  
oTopMenu[i][0].css.visibility="visible"  
}  
}  
//Moves the menu  
function topMenu(num){  
if(oTopMenu[num][1].y==nImageheight) oTopMenu[num][1].slideDown(oTopMenu[num][2].scrollHeight+20,10,40,'oTopMenu['+num+'][0].clipTo(0,nMwidth,oTopMenu['+num+'][1].y+1,0)','oTopMenu['+num+'][0].clipTo(0,nMwidth,oTopMenu['+num+'][1].y+1,0)')  
else if(oTopMenu[num][1].y==oTopMenu[num][2].scrollHeight+20) oTopMenu[num][1].slideUp(nImageheight,10,40,'oTopMenu['+num+'][0].clipTo(0,nMwidth,oTopMenu['+num+'][1].y+0,0)','oTopMenu['+num+'][0].clipTo(0,nMwidth,oTopMenu['+num+'][1].y+1,0)')  
}  
//Changes background onmouseover  
function menuOver(num){oTopMenu[num][1].bgChange(nBgcolorchangeto)}  
function menuOut(num){oTopMenu[num][1].bgChange(nBgcolor)}  
 
//Calls the init function onload if the browser is ok...  
if (bw.bw) onload = newsMenuInit;  
 
/***************  
Multiple Scripts  
If you have two or more scripts that use the onload event, probably only one will run (the last one).  
Here is a solution for starting multiple scripts onload:  
   1. Delete or comment out all the onload assignments, onload=initScroll and things like that.  
   2. Put the onload assignments in the body tag like in this example, note that they must have braces ().  
   Example: <body onload="initScroll(); initTooltips(); initMenu();">  
**************/  
</script>  
 
<!-- HEAD END HERE -->  
 
 
 
 
</head>  
<body bgcolor="#eeeeee" topmargin="0" leftmargin="0">  
 
 
 
<!-- BODY START HERE -->  
 
<!-- Remember the "news" "key control" and "page contols" text are images, you probably want to change those  
with your own images. If your own images have different sizes please adjust the height and clips  
of the divs, and change the nImageheight variable in the script. Good luck -->  
<div id="divTopMenu0" class="clTopMenu"><a href="#" onmouseover="menuOver(0)" onmouseout="menuOut(0)" onclick="topMenu(0); return false;" onfocus="if(this.blur)this.blur();"><img src="images/menu_06.jpg" alt="" width="108" height="60" border="0"></a>  
<div id="divTopMenuText0" class="clTopMenuText">  
RRRR<br>  
RRRR<br>  
RRRR<br>  
RRRR<br>  
RRRR<br>  
RRRR<br>  
RRRR<br>  
RRRR<br>  
RRRR<br>  
RRRR<br>  
RRRR<br>  
RRRR<br>  
RRRR<br>  
RRRR<br>  
</div>  
<div id="divTopMenuBottom0" class="clTopMenuBottom"></div>  
</div>  
 
 
</body>  
</html>  

 
Вопрос:
 
Вот посмотрите , я применил этот скрипт меню, на http://mihastep.nm.ru/  (там в картиночном меню , пункт-«Прочая продукция»).  
 
Так вот, видите, там все кнопки в меню при наведении курсора меняют первоначальную картинку на другую, а та для которой сделано выпадающее меню(«Прочая продукция»), не меняется…  
 
Можно ли сделать так, чтобы и «Прочая продукция» менялась при наведении мышки ?.  
 
 
                    ПРОБОВАЛ, как в постах выше, чето не получается...

----------
Предлагают
на https://floristum.ru - Доставка букетов день в день на дом, цветов по Москве.

Всего записей: 794 | Зарегистр. 25-06-2004 | Отправлено: 02:28 16-09-2004
IggyTot

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Всем доброго времени суток. у меня немного специфичная проблема.
 
есть картинка и в ней две area. нужно чтобы по наведению на арею, она меняла картинку под собой (ну или всю картинку на другую).  
 
помогите пожалуйста.

Всего записей: 4 | Зарегистр. 14-07-2012 | Отправлено: 00:05 14-07-2012
Side_Reality

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Подробнее...

Всего записей: 1 | Зарегистр. 10-02-2013 | Отправлено: 03:50 10-02-2013 | Исправлено: Side_Reality, 04:00 10-02-2013
Открыть новую тему     Написать ответ в эту тему

Страницы: 1 2

Компьютерный форум Ru.Board » Интернет » В помощь вебмастеру » Замена нескольких картинок при наведении на картинку/ссылку


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.Board
© Ru.Board 2000-2020

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru