Kliknite tukaj, da si ogledate profil, kot ga vidijo drugi

Menjava slike nad povezavo
Avtor: NikMan | Objavljeno: dne 10. april 2007, 12:04
  Dreamweaver ponuja kar nekaj pripomočkov pri določanju obnašanja posameznih elementov na strani. Pokazal vam bom zelo zanimivega.
 
 
1
  
 
Odprite Macromedia Dreamweaver nov HTML dokument.
 
 
2
  
 
Dodali bomo prvo sliko.

Kliknite na Insert in izberite Image.

Izberite poljubno sliko in kliknite na gumb OK.
 
 
3
  
 
Slika je dodana.

Spodaj pod sliko napišite Slika 1 in Slika 2, kot je razvidno na moji sliki.

Potem pa z miško označite sliko.
 
 
4
  
 
V polju Propreties določite sliki ime slika (glej sliko).
 
 
 
 
 
5
  
 
Označite tekst Slika 1.
 
 
6
  
 
V polju Link vpišite znak # ali pa povezavo na spletno stran.
 
 
7
  
 
Zgoraj kliknite na Windows in izberite Behaviors.

Behaviors mora biti označen.
 
 
8
  
 
Behaviors okno se prikaže na desni strani.

Kliknite na znak plus (glej sliko)...
 
 
9
  
 
...in izberite Swap Image.

Odpre se okno Swap Image.

V polju Images označite sliko slika (ki ste je prij imenovali v oknu Propreties).

V polju Set source to pa preko gumba Browse določite sliko, ki želite da se zamenja, ko boste nad označenim tekstom.

Preload images naj ostane označeno in kliknite na gumb OK.
 
 
10
  
 
Prvo pravilo smo določili.

Označite sedaj še tekst Slika 2 in ponovite postopek, le da v polju Set source to določite drugo sliko.
 
 
11
  
 
Pritisnite tipko F12, da boste ravnokar narejeno stran odprli v spletnem brskalniku.
 
 
12
  
 
Premaknite se z miško na povezavo Slika 1 in zgornja slika bi se morala zamenjati.
 
 
13
  
 
Premaknite se še nad povezavo Slika 2 in slika bi se morala zamenjati z drugo sliko.
 
 
Komentiraj
  
 
 
 
 
30.1.2008, 19:22
S U P E R !!! NAREDI DOBER IZGLED!! HVALA!
 
 
 
 
9.7.2010, 15:57
Kako pa potem večji sliki dodati povezavo?
 
 
 
 
9.7.2010, 18:41
Bo pa treba v javascriptu spremenit. Dodati <a> pred <img>. Potem pa napisat, da javascript poleg srcja od <img> spremeni tudi href od <a>

Lahko pa kdo prilepi kodo, pa bom točno povedal, kako napisati.

spremenil: kljuka (9.7.2010 ob 18.42.21)
 
 
 
 
9.7.2010, 18:52
Zdravo,
spodaj je koda za eno sliko:
<a href="#"><img src="http://realife.si/files/menu/01.png&.... width="64" height="64" border="0" onclick="MM_swapImage('slika1','','http://realife.si/files/menu/p01.png....,1)" /></a>


Torej, da me ob kliku na sliko p01.png poveže na določeno stran.

spremenil: realife (9.7.2010 ob 18.53.44)
 
 
 
 
9.7.2010, 19:10
<a href="#">


||
\/

<a href="google.com">


Če pa imaš za vsako sliko posebej link, pa prosim prilepi še funkcijo MM_swapImage (mislim, da dw ustvari posebej datoteko, kjer jo lahko najdeš).

spremenil: kljuka (9.7.2010 ob 19.11.04)
 
 
 
 
9.7.2010, 19:19
Ti prilagam kar povezavo do strani:
http://realife.si/files/menu.html

Vse je združeno v eni datoteki. Poglej si izvorno kodo.

P.S.: Če spremenim povezavo, tako kot si jo ti, bom določil, da tista številka spodaj pelje direktno na google.com. Jaz hočem pa, da vsaka večja pelje nekam.
 
 
 
 
9.7.2010, 20:45
Okej.

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]; x.parentNode.href=a[i+1];}
}


To je nova funkcija.

MM_swapImage('slika1','','http://realife.si/files/menu/p01.png....,1)


Ko imaš pa te linke pri spodnjih številkah, pa v drugi argument vstavi želeni link, npr:



Pri vsaki posebej. Tisto veliko sliko vstavi v nov <a> in to je to.
 
 
 
 
9.7.2010, 21:16
Ni mi čisto jasno.

Kako misliš, da tisto večjo prestavim v nov <a>?
 
 
 
 
9.7.2010, 21:37
Sedaj imaš

<img width="915" height="385" id="slika1" name="slika1" src="http://realife.si/files/menu/p01.png....


Namesto tega napiši

<a href="prvilink.com"><img width="915" height="385" id="slika1" name="slika1" src="http://realife.si/files/menu/p01.png....
 
 
 
 
10.7.2010, 16:33
To deluje zgolj pri prvotni sliki.

Potrebujem pa točno povezavo za spodnji primer. Torej # se ne sme odstraniti. Zaenkrat še nobena zadeva ni delovala.

<a href="#"><img src="http://realife.si/files/menu/01.png&.... width="64" height="64" border="0" onclick="MM_swapImage('slika1','','http://realife.si/files/menu/p01.png....,1)" /></a>
 
 
 
 
11.7.2010, 12:46
?

Ti imaš spodaj 5 slikic. Ko stisneš na prvo, se zgoraj prikaže prva slika in ko stisneš na prvo sliko se odpre neki prvi link. Ko stisneš na drugo malo slikico se zgoraj prikaže druga velika slika in ko stisneš na to drugo veliko sliko se odpre neki drugi link ... ?

Najprej zamenjaj tisto funkcijo MM_swapcode z zgoraj napisano (dodana je ena vrstica). Potem pa tam, kjer imaš veliko, namesto

<img sliika />


napiši

<a href=""><img sliika /></a>
 
 
 
 
23.4.2011, 15:40
jaz sem tudi gledal ali lahko odstraniš #
ugotovil sem da lahko, torej sem enostavno pobrisal # in prilepil link do ciljne datoteke.

Nevem pa če deluje v istem programu, vrjetno deuje, vendar jaz sem mu povezavo do datoteke prilepil v kompozer-ju.
 
Prijava in registracija
 
 
 
Zmaga.com ponuja brezplačno in razumljivo učenje računalniških programov, vas na enkraten način spozna z različnimi svetovnimi jeziki, s podrobno obrazloženimi recepti prikaže čare kulinarike in vam prežene strahove pred domačimi opravili.
 
 
Poleg tega lahko prebirate poučne članke, ki so namenjene širjenju naše splošne razgledanosti ter preverite svoje znanje z priljubljenim in enostavnim sistemom za preverjanje znanja. Če med vsebinami, ki se dodajajo vsak dan, ne najdete želenega znanja, je za vaša vprašanja na voljo dobro obiskan forum, kjer lahko tudi aktivno sodelujete. V primeru, da bi radi svoje praktično znanje delili z ostalimi, pa to lahko storite preko preprostega vmesnika za dodajanje vsebin. Zmagajte z znanjem z Zmaga.com!
  
Zmaga.com na Facebooku | Pošljite nam e-pošto | Informacije o Zmaga.com