Overmouse da mjenja sliku

Dakle, zanima me kako da namjestim HTML-om ili CSS-om (ili oboje ako treba) da mi se prikazuje jedan banner, a kad se dođe mišom na njega, da prikazuje drugi banner - točnije da se samo slika promjeni.

Primjerice - dosta stranica ima onu facebook ikonicu crno-bijele boje, a kad se dođe mišom na nju, ona postane plava. Samo mi tako nešto treba za bannere.

Unaprijed hvala na odgovorima…

HTML to po samoj svojoj prirodi ne može. CSS ima :hover pseudo klasu ali po običaju ne radi u svim browserima.

Ako želiš koliko-toliko sigurnu implementaciju, najbolje ti je koristiti Javascript.

[quote=“mrcina”]Dakle, zanima me kako da namjestim HTML-om ili CSS-om (ili oboje ako treba) da mi se prikazuje jedan banner, a kad se dođe mišom na njega, da prikazuje drugi banner - točnije da se samo slika promjeni.

Primjerice - dosta stranica ima onu facebook ikonicu crno-bijele boje, a kad se dođe mišom na nju, ona postane plava. Samo mi tako nešto treba za bannere.

Unaprijed hvala na odgovorima…[/quote]

Pokušaj ovo:

<script type="text/javascript">
if (document.images) {
image1N= new Image(70,70);
image1N.src= '1.png' ;
image1H= new Image(70,70);
image1H.src= '1a.png' ;

function myOn(myImgName) {
document[myImgName].src=eval(myImgName+ 'H' ).src;
}
function myOut(myImgName) {
document[myImgName].src=eval(myImgName+ 'N' ).src;
}
}
</script>




<a HREF="index.php"><img SRC="1.png" ALT="naslov" title="naslov" NAME="image1" BORDER="0" WIDTH="70" HEIGHT="70" onMouseOver="myOn(this.name)" onMouseOut="myOut(this.name)"></a>

Možeš naravno dodati slika, ostavio sam samo jednu u codeu kao primjer.

To se postiže najčešće sa CSSom, dakle napraviš jedan sprite i mjenjaš background-position pozadinske slike.

Dakle, recimo da imaš slikicu koja ima dva stanja, (a) mouse out i (b) mouse over.

Složiš te dvije ikone jednu ispod druge

(a)
(b)

i napraviš jednu zajedničku sliku, dimenzije recimo 40x80px

Kada želiš prikazati mouse out varijantu, staviš:

background-position:0px 0px;

kada želiš prikazati mouse over staviš:

background-position:0px -40px;

Da bi napravio taj hover efekt, možeš kao što je rekao voajer, koristiti :hover pseudo klasu. Ima mana (čitaj IE6) ako primjenjueš na nekom drugom elementu osim , ali ako primjeniš na , sve će biti ok :slight_smile:

Dakle,

a.ikona {
/* konstantno */
background-image:url('images/ikona.png');
background-repeat:no-repeat;
width:40px;
height:40px;

/* mouse out */
background-position:0px 0px;
}
a.ikona:hover {
/* mouse over */
background-position:0px -40px;
}

Nadam se da shvaćaš, ako imaš pitanja… pucaj :slight_smile:

EDIT: e da, sprite ti ubrzava load jer otvara samo jednu sliku, dok ostale varijante traže dvije slike

Tri odgovora u kratkom roku… Neočekivano (s moje strane), i vrlo lijepo (meni) za vidjet. Hvala dečki, (rep + to all) :slight_smile:

E sad, vratimo se na temu… Da odmah kažem, meni odgovor @Masterofnerad-a izgleda najjednostavnije za koristit, no čini mi se da je @nitko dao bolji prijedlog (upravo zbog loada samo jedne slike). Na stranici bi trebalo bit oko 10-15 bannera (dimenzije 88x31) i kada bi se loadalo po dvije slike, to bi bilo 20-30 slika, što nije malo, jer su neke animirane (.gif).

Dakle, nastavit ćemo dalje o @nitko-vom prijedlogu.

Pošto sam ja tuka za većinu stvari što se tiče tih kodova i toga, volio bih da mi se kaže kao totalnom početniku. Pretpostavljam da bi ovaj zadnji kod trebao dodat u CSS file, a onda u HTML ubacit gdje želim da se to prikazuje ubacim ovako:

[HTML]

KOD OD BANNERA
[/HTML]

Pošto je pozadinska slika definirana u CSS-u, pretpostavljam da u kod bannera ide url od bannera koji se prikazuje dok se dođe mišom na sliku?!

Isto tako, ja bi za svaki od bannera trebao poseban CSS kod radit? (jer je drugačija pozadinska slika) Napominjem da mi nije problem ih napravit, samo pitam da vidim jesam skužio.

Toliko od mene, i unaprijed hvala svima na strpljenju i odgovorima.

prva stvar a.ikona ti nije id, u css-u id počinje s #
a.ikona označava da je riječ o a tagu (linku), “.ikona” označava da je riječ o klasi “ikona” (elementi koji počinju točkom u css-u označavaju class atribut) pa bi ti onda kod tu izgledao nešto drukčije…

Imas opciju u DreamWeaveru da to namjestis znaci samo ti trebaju slike nikakav kod nista. Pa eto pokusaj ili ako zelis mogu ti ja to probat sa nekim slika i poslati kod

Insert-> Image Objects-> Rollover Image

[quote=“Kečko”]prva stvar a.ikona ti nije id, u css-u id počinje s #
a.ikona označava da je riječ o a tagu (linku), “.ikona” označava da je riječ o klasi “ikona” (elementi koji počinju točkom u css-u označavaju class atribut) pa bi ti onda kod tu izgledao nešto drukčije…
[/quote]

Znao sam i jedno i drugo, ali jučer bilo kasno i sad tek vidim kakve sam gluposti napisao :doki: No svejedno hvala na pomoći :slight_smile:

Prvi mi je problem što nemam taj program, no to rješim tako da posudim od frenda. No ima li negdje neki tutorijal kako se to radi? Ja ću se poigrat time, pokušat, valjda bum neš skemijal.

To je uputa za DreamWeaver? Ili?

da, to u dreamweaveru tako napravi najjednostavnije

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onload="MM_preloadImages('file:///C|/Documents and Settings/Domagoj/Desktop/unzas.png',[B] tu dodajes sve 1. slike od linkova po principu kako je napisana i ova 1.[/B])">
<a href="[B]LINK[/B]" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('[B]Ime slike totalno nebitno[/B]','','file:///[B]C|/Documents and Settings/Domagoj/Desktop/unzas.png'[/B],1)"><img src="file:///[B]C|/Documents and Settings/Domagoj/Desktop/poziv.jpg[/B]" alt="[B]ALT tekst[/B]" name="I[B]me slike totalno nebitno[/B]" width="[B]800[/B]" height="[B]1101[/B]" border="0" id="[B]Ime slike totalno nebitno[/B]" /></a>
</body>
</html>

Znači ovako, ja sam ti u čistom fajlu napravio jedan rollover. Ti kopiraj ovaj source kod u program u kojem radis web site. I mjenjaš samo ovaj dio

<a href="[B]LINK[/B]" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('[B]Ime slike totalno nebitno[/B]','','file:///[B]C|/Documents and Settings/Domagoj/Desktop/unzas.png'[/B],1)"><img src="file:///[B]C|/Documents and Settings/Domagoj/Desktop/poziv.jpg[/B]" alt="[B]ALT tekst[/B]" name="I[B]me slike totalno nebitno[/B]" width="[B]800[/B]" height="[B]1101[/B]" border="0" id="[B]Ime slike totalno nebitno[/B]" /></a>

to ti je jedan link, ako trebas dva, kopiraj i izmjeni boldane podatke

[size=4]Nemojte čovjeku sugerirati Moskviča samo zato jer traži prijevozno sredstvo :slight_smile: pogotovo ako ništa ne košta.[/size]

Dakle, ovo se da riješiti uz malo CSSa i Javascripta. Pomoću Javascripta ćemo svim linkove koji imaju class=“reklama” uzeti atribut title i njega postaviti kao pozadinsku sliku. Nadam se da se nisi pogubio za sad :slight_smile:

Dakle ta slika će imati dva stanja, mouse out i mouse over. Javascript će namjestiti CSSom mouse out varijantu, a kad pređemo mišem će prebaciti u mouse over varijantu.

E sada, da nebi previše komplicirali sam uzeo jQuery library da bi smo lakše i efikasnije sve napravili.

Prvo što ćemo staviti je u head slijedeću skriptu.

<script src="http://code.jquery.com/jquery-latest.pack.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
	$(document).ready(function() {
				
		$('a.reklama').each(function() {
					
			var url = $(this).attr('title');
			var dim = $(this).attr('rel').split(',');
					
			$(this).css({
				'width': dim[0] + 'px',
				'height': (dim[1] / 2) + 'px',
				'display': 'block',
				'border': '0px',
				'background-repeat': 'no-repeat',
				'background-position': '0px 0px',
				'backgroundImage': 'url('+ url +')'
			});
					
			$(this).hover(
						
				function() {
						
					$(this).css('background-position', '0px -'+ (dim[1] / 2) +'px');
						
				},
						
				function() {
							
					$(this).css('background-position', '0px 0px');
							
				}
					
			);
					
		});
				
	});
</script>

Sada ćemo svugdje gdje želimo postaviti reklamu, ubaciti ovaj HTML markup.

[html][/html]

Dakle, stvaramo jedan link koji će normalno povezivati reklamu, u title (nažalost, svrha title atributa nije ta, ali nemamo druge) stavljamo putanju do slike, i u rel atribut stavljamo dimenzije slike u formatu “sirina,visina” (bez sufiksa “px”), samo brojku. Na kraju dodamo klasu “reklama” da bi Javascript do prevrnuo u reklamu.

Dakle npr,

[html][/html]

Rezultat bi trebao biti otprilike ovo:

http://lab.nemojkliknut.com/css_rollover_ad.html

[size=4]* pogledaj source code da vidiš skroz primjenjeno to[/size]

Isprobao sam ovo što je @nitko napisao na svojoj stranici, i RADI!!! :slight_smile:

Puno hvala @nitko :slight_smile: Rep+

Još samo nekaj… Kad radim sliku za banner radim ju na način da ju napravim duplanu, jednu ispod druge, i da prva bude koja se prikazuje kad je miš “out”, a ova druga da se prikazuje kad je miš “over”? Odnosno, ovako kako si ti tu napravio npr za nethr =>
http://slike.hr/slike/n/nethr_188f5.jpg

Još samo mi to potvrdi i rješio si mi jednu veliku muku :slight_smile:

Upravo tako, i nemoj raditi razmak između slika.

http://slike.hr/slike/princip_5e076.jpg.html

Da, to sa razmakom sam i mislio da ide tako :wink:

Hvala još jednom :slight_smile:

PS Rep+ trenutno ne mogu više davat, jer sam ih previše podjelio. Čim ja dobijem negdje rep+, dobijam mogućnost davanja, pa se vraćam u ovu temu “vratit dug”.

Ma nema potrebe, tu smo da si pomažemo :wink: viči ako nešto neće raditi.

za ovu caku nisam ni ja znao, odlicno. hvala i od mene. :smiley:
A ovo za moskvića se vjerovatno odnosilo na mene jer sam ja najtraljaviji način ponudio. Ali mislio sam da ce to biti puno jednostavnije od css-a, zaboravio sam da nista nije jednostavnije od css-a (ako ga znas) :smiley:

E sad me zanima još nešto za ovu skriptu… Ono sam uspio napravit i ubacit u običnu stranicu, no sad sam htio isto to napravit na jednom joomla sajtu, i tu mi radi probleme.

Naime, kada odem u editiranje predložaka, i editiranje HTML-a, unutar “” imam samo ovo:

[quote=""] <jdoc:include type=“head” />
<?php
require(YOURBASEPATH . DS . “rt_utils.php”);
require(YOURBASEPATH . DS . “rt_head_includes.php”);
?>[/quote]

Ukoliko kod koji je napisao @nitko ubacim prije ili poslije toga, te u modul u administraciji ubacim onaj HTML koji je isto @nitko napisao, modul mi je aktivan ali ništa ne pokazuje.

E sad, ako ja ubacim u modul i kod skripte i html za prikaz, on meni prikazuje bannere ispravno, ali mi onda gasi jedan drugi modul na sajtu. Dakle, pokazuje sajt i taj drugi modul, ali ga ne prikazuje kako treba. Radi se o posebnom modulu, ne običnom “rulnom HTML-u”.

Sad mene zanima, gdje bi ja trebao ubacit kod od skripte da bi mi se banneri dobro prikazivali, a i da bi drugi moduli rade kako treba.

PS Možda sam trebao u drugi podforum, no moje mišljenje je da je ovaj podforum, točnije ova tema prikladnija.

Problem rješen! Kako? Pročitajte ovaj post: #2


Copyright © 2020 WM Forum - AboutContact - Sponsored by: Mydataknox & Webmaster.Ninja