WEB-stranica sa dodatnim slikama

jvinkovic · 07.03.2012., 21:34

Pozdrav radim po malo sa web stranicama vecinom u joomli. Ali bih sada nesto htio drugacije napraviti imam ideje koje neznam kako izvesti. Htio bih odraditi jednu web stranicu za PC. Bio bih pc na naslovnici i na njemu bih bilo dosta tocaka. Klikom na svaku od tocaka otvarao bih se prozor sa detaljnim slikama toga dijela i tekstom nesto slicno ima na ovoj stranici.http://www.mercedes-amg.com/#/cls63-interior
Zanima me kako napraviti to sebi na stranici. Najvise bi mi odgovarao neki Template koji bih sebi prilagodio.

POMOC????

Horz · 08.03.2012., 07:02

Jako lijepa stranica

Jasno se daje na znanje da AMG nije za svakoga.
Cijela je u Flashu. Trebao bi dobro savladati Flash i Action Script da nešto slično napraviš.

Samo ovakve stranice su dobro riješenje za tvrtke ili pojedince, koji imaju "klasičnu" stranicu a Flash site igra "šminkersku ulogu".

U tvom slučaju je možda najbolje da potražiš animirani template u JavaScriptu.
Ima ih vrlo atraktivnih po cijeni od 60-70$:
http://www.templatemonster.com/pack/...mplates-html5/

jvinkovic · 08.03.2012., 12:56

Ovo su sve dobre stranice ali meni ne treba ovolika stranica. Ja sma stranicu zamislio samo kao jednu sliku koja ce imati desetak tocka na sebi. I klikom na svaku tocku pokazivat ce se mala slicica unutar nje. Dali tko zna neki teamplate slican tome sto ja hocu. Najbolje bi mi bilo da ide nesto preko jave ili jQuerya da ne radim u flashu

Horz · 09.03.2012., 08:12

Quote:

jvinkovic kaže:

Ovo su sve dobre stranice ali meni ne treba ovolika stranica. Ja sma stranicu zamislio samo kao jednu sliku koja ce imati desetak tocka na sebi. I klikom na svaku tocku pokazivat ce se mala slicica unutar nje. Dali tko zna neki teamplate slican tome sto ja hocu. Najbolje bi mi bilo da ide nesto preko jave ili jQuerya da ne radim u flashu

Malo je previše specifično da bi našao baš takav template.
Možda i ima ali tko će to pronači.

Ovo možeš jednostavno izvesti u Javascriptu (swapImage).

Tvoja slika u kojoj se nalaze točke je pozadina (bilo kakva grafika).
Točka je npr. slika1.gif a mala sličica unutar nje slika2.gif.
One se izmjenjuju na swapImage. S tim da u nekom grafičkom programu
sliku2 napraviš tako, da je ona zapravo slika1 - ali sa dodanom
sličicom (slikom2). Pa efekt izgleda kao da se na click se pojavi
slika u sliki.

HTML Code:

<html>
	<head>
		<script type="text/javascript">
			intImage = 2;
			function swapImage() {
			switch (intImage) {
			case 1:
			slika1.src = "slika1.gif"
			intImage = 2
			return(false);
			case 2:
			slika1.src = "slika2.gif"
			intImage = 1
			return(false);
			}
			}
		</script>
	</head>

	<body>
		<img id="slika1" name="slika1" 
		src="slika1.gif" onclick="swapImage();" 
		style="cursor:pointer">
	</body>
</html>

jvinkovic · 10.03.2012., 16:36

Uspio sam to odraditi. I lijepo izgleda. Mozete li mi reći kako bih mogo ograniciti izmjenu slika samo na jednu ticku pa da stavim vise tocaka sa vise slika.

Horz · 11.03.2012., 09:38

Možda je najednostavnije za svaku izmjenu slike stvoriti posebnu funkciju.
Swap01 izmjenjuje prvu sliku, swap02 drugu itd.

Slike sa oznakom "a" su početno stanje.
Slike sa oznakom "b" su izmjenjeno stanje.

onClick poziva funkciju swap01 za sliku_1, swap02 za sliku_2 itd.

HTML Code:

<html>

	<head>
		<script type="text/javascript">
			
			function swap01(img){
			img.src=(img.src.indexOf('slika_1b.gif')>=0)?'slika_1a.gif':'slika_1b.gif';}
			
			function swap02(img){
			img.src=(img.src.indexOf('slika_2b.gif')>=0)?'slika_2a.gif':'slika_2b.gif';}
			
			function swap03(img){
			img.src=(img.src.indexOf('slika_3b.gif')>=0)?'slika_3a.gif':'slika_3b.gif';}
		
		</script>
	</head>

	<body>  
		
		<div style="text-align:center; margin-top:20%">
			<img src="slika_1a.gif" onclick="swap01(this);" style="cursor:pointer;"/>
			<img src="slika_2a.gif" onclick="swap02(this);" style="cursor:pointer;"/>
			<img src="slika_3a.gif" onclick="swap03(this);" style="cursor:pointer;"/>
		</div>
	
	</body>

</html>

jvinkovic · 02.04.2012., 23:59

Puno ti hvala na pomoći odradio sam stranicu. Trenutno sam zadovvoljan imam par gresaka u kodu koje cu ispraviti ovih dana. Još je malo treba optimizirati. Ali to je to,što sam htio. http://whiteangel.in-7.com/