Javascript na obrazok

Sekcia o programovaní, programovacích jazykoch...
Používateľov profilový obrázok
Puk1
Nový používateľ
Nový používateľ
Príspevky: 132
Dátum registrácie: So 21. Mar, 2009, 08:45
Bydlisko: Banská Bystrica

Javascript na obrazok

Príspevok od používateľa Puk1 »

Zdravim, uz pol dna sa snazim zohnat javascript na nieco taketo http://www.upnito.sk/0/wyzjjc46g6p4xx6y ... x44cps.jpg Ze po prejdeni mysou na obrazok sa zobrazi taketo "pop-up" s informaciami a zaroven to bude sluzit ako odkaz.

:smutny:

Ak by niekto o niecom takom vedel bol by som vdacny.



Dakujem.
Používateľov profilový obrázok
newmi
Moderátor
Moderátor
Príspevky: 7687
Dátum registrácie: Ut 23. Jan, 2007, 08:00
Bydlisko: Trnava

Re: Javascript na obrazok

Príspevok od používateľa newmi »

ked vies o nejakej stranke kde je to pouzite, kukni sa do kodu. Uz som to tiez dakde videl ale uz bohuzial neviem adresu.
myPC CPU:i5 3350P, MB:Gigabyte B75M D3H, RAM:8GB Kingston 1600MHz cl9, VGA:MSI R9 270 Gaming DVD-RW:LG H12NR, HDD:Toshiba 1TB, SSD:Toshiba HG2 256GB, LCD:LG W2220P-BF, Case: SilentiumPC Gladius M35,PSU:Seasonic M12II 520W, Router: Mikrotik hAP ac2 myPhone: Google Pixel 4a myStation: Playstation 3 myHeadphones: Sennheiser HD 438
Používateľov profilový obrázok
glirpi
Používateľ
Používateľ
Príspevky: 1270
Dátum registrácie: Ne 09. Máj, 2010, 03:36
Bydlisko: Handlova / okres PD

Re: Javascript na obrazok

Príspevok od používateľa glirpi »

vyuzivas aj jquery?
I♥C64 0,97Mhz CPU, 64KB RAM, VIC-II GPU (320x200 multicolor / 16 farieb) a aka zabava..
Spoiler: ukázať
PC: CPU: INTEL Core i5-9600KF / CPU-COOLER: NZXT Kraken X52 / MB: GIGABYTE Z390 M / RAM: Corsair 16 GB KIT DDR4 3600 MHz CL18 Vengeance LPX / SSD: WD Black SN750 NVMe SSD 1 TB / DVD-RW: - / PSU: Seasonic X-Series 560W / CASE: NZXT H400 / VGA: GIGABYTE GeForce RTX3060 GAMING OC 12GB / SOUND: SOUND BLASTER AE-7 / SPEAKERS: - / HEADPHONES: BEYERDYNAMIC DT 770 PRO (80 ohm) / LCD: DELL UltraSharp U2717D 27" / KEYBOARD: DELL Premier Wireless Keyboard / MOUSE: DELL KM717 / GAMEPAD: MICROSOFT Xbox 360 wireless controller / OS: MICROSOFT Windows 10 PRO 64Bit
Používateľov profilový obrázok
Puk1
Nový používateľ
Nový používateľ
Príspevky: 132
Dátum registrácie: So 21. Mar, 2009, 08:45
Bydlisko: Banská Bystrica

Re: Javascript na obrazok

Príspevok od používateľa Puk1 »

No nasiel som toto a vobec to neviem rozchodit moj web http://puki.yw.sk/ ten prvy obrazok by mal mat ten efekt...


http://serifaddons.com/slidingboxes.html


:/
Používateľov profilový obrázok
Puk1
Nový používateľ
Nový používateľ
Príspevky: 132
Dátum registrácie: So 21. Mar, 2009, 08:45
Bydlisko: Banská Bystrica

Re: Javascript na obrazok

Príspevok od používateľa Puk1 »

VYRIESENE !
Používateľov profilový obrázok
newmi
Moderátor
Moderátor
Príspevky: 7687
Dátum registrácie: Ut 23. Jan, 2007, 08:00
Bydlisko: Trnava

Re: Javascript na obrazok

Príspevok od používateľa newmi »

tak sa podel o riesenie :rolleyes:
myPC CPU:i5 3350P, MB:Gigabyte B75M D3H, RAM:8GB Kingston 1600MHz cl9, VGA:MSI R9 270 Gaming DVD-RW:LG H12NR, HDD:Toshiba 1TB, SSD:Toshiba HG2 256GB, LCD:LG W2220P-BF, Case: SilentiumPC Gladius M35,PSU:Seasonic M12II 520W, Router: Mikrotik hAP ac2 myPhone: Google Pixel 4a myStation: Playstation 3 myHeadphones: Sennheiser HD 438
robin
Nový používateľ
Nový používateľ
Príspevky: 21
Dátum registrácie: So 02. Jún, 2012, 17:03
Bydlisko: Poprad

Re: Javascript na obrazok

Príspevok od používateľa robin »

to sa dá vyriešiť aj bez javascriptu jednoducho cez :hover v CSSku
Používateľov profilový obrázok
glirpi
Používateľ
Používateľ
Príspevky: 1270
Dátum registrácie: Ne 09. Máj, 2010, 03:36
Bydlisko: Handlova / okres PD

Re: Javascript na obrazok

Príspevok od používateľa glirpi »

@robin: tak to by som chcel vidiet ;)
@Puk1: nechcem sa ta dotknut ani urazit, ale ak sa prezentujes ako webdizajner a na taketo nieco potrebujes pol dna "hladat" skript, neviem ci si si zvolil spravny smer posobenia. teda plati iba v pripade ze ta webstranka je iba ukazkova/pracovna a nebude sa jednat o funkcny projekt v buducnosti.

otestovat si to cele mozes tu: http://jsfiddle.net/xhswv/


jquery.js
si musis stiahnut

style.css

Kód: Vybrať všetko

/* CSS Document */

body
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin: 40px;
	padding: 0;
}

.box
{
	position: relative;
	float: left;
	margin-right: 10px;
	border: solid 5px #CCC;
	line-height: 0;
	overflow: hidden;
}

.block
{
	position: absolute;
	left: 0px;
	bottom: -50px;
	background-color: #000;
	padding: 10px;
	width: 93%;
	line-height: 16px;
	color: #FFF;
	/*opacity: 0.7;*/
}

.block a
{
	color: #FFF;
	text-decoration: underline;
}
slide.html

Kód: Vybrať všetko

<!DOCTYPE HTML>
	<head>
		<meta charset="utf-8">
		<link href="style.css" rel="stylesheet" type="text/css" />
		<script src="jquery.js" type="text/javascript"></script>
		
		<script type="text/javascript">
			$(document).ready(function()
			{
				$(".box").hover(
					function()
					{
						var content = $(this).find("img").attr("rel");
						var c = content.split("|");
						$(this).append("<div class=\"block\">" + c[0] + "<br><a href=\"http://" + c[1] + "\">" + c[1] + "</a></div>");
						
						$(this).find(".block").stop().animate(
						{
							bottom: '+=50'
						}, 200);
					},
					function()
					{
						$(this).find(".block").stop().animate(
						{
							bottom: '-=55'
						}, 200, function()
						{
							$(this).find(".block").remove();
						});
					}
				);
			});
		</script>
		
	</head>
	
	<body>
		<div class="box"><img rel="Ked slnko svieti, obloha je hned jasnejsia..|www.adresa.sk" src="img/obrazok.jpg"></div>
		<div class="box"><img rel="Ked slnko svieti, obloha je hned jasnejsia..|www.adresa.sk" src="img/obrazok.jpg"></div>
		<div class="box"><img rel="Ked slnko svieti, obloha je hned jasnejsia..|www.adresa.sk" src="img/obrazok.jpg"></div>
		<div class="box"><img rel="Ked slnko svieti, obloha je hned jasnejsia..|www.adresa.sk" src="img/obrazok.jpg"></div>
	</body>
</html>
na tejto ukazke nerisim priehladnost slide elementu z obsahom. to by som riesil nejakym png transparentnym obrazkom a dal to pre styl .box ako

Kód: Vybrať všetko

background-image: url(img/transparent_box.png);
I♥C64 0,97Mhz CPU, 64KB RAM, VIC-II GPU (320x200 multicolor / 16 farieb) a aka zabava..
Spoiler: ukázať
PC: CPU: INTEL Core i5-9600KF / CPU-COOLER: NZXT Kraken X52 / MB: GIGABYTE Z390 M / RAM: Corsair 16 GB KIT DDR4 3600 MHz CL18 Vengeance LPX / SSD: WD Black SN750 NVMe SSD 1 TB / DVD-RW: - / PSU: Seasonic X-Series 560W / CASE: NZXT H400 / VGA: GIGABYTE GeForce RTX3060 GAMING OC 12GB / SOUND: SOUND BLASTER AE-7 / SPEAKERS: - / HEADPHONES: BEYERDYNAMIC DT 770 PRO (80 ohm) / LCD: DELL UltraSharp U2717D 27" / KEYBOARD: DELL Premier Wireless Keyboard / MOUSE: DELL KM717 / GAMEPAD: MICROSOFT Xbox 360 wireless controller / OS: MICROSOFT Windows 10 PRO 64Bit
Používateľov profilový obrázok
Puk1
Nový používateľ
Nový používateľ
Príspevky: 132
Dátum registrácie: So 21. Mar, 2009, 08:45
Bydlisko: Banská Bystrica

Re: Javascript na obrazok

Príspevok od používateľa Puk1 »

Medzi dizajnerom a koderom je troska rozdiel nie ? ;) A dakujem za radu. Zajtra to vyskusam.

Mne HTML a CSS zatial staci JS sa mi ucit velmo nechce.
robin
Nový používateľ
Nový používateľ
Príspevky: 21
Dátum registrácie: So 02. Jún, 2012, 17:03
Bydlisko: Poprad

Re: Javascript na obrazok

Príspevok od používateľa robin »

glirpiPc napísal:@robin: tak to by som chcel vidiet ;)
Challenge accepted ;-)

nechelo sa mi s tým hrať dlho, tak len takto narýchlo. V podstate tam je všetko:
http://cssdesk.com/mJSHz

edit:
http://jsfiddle.net/h9HUq/13/ - toto mi zobrazuje v Chrome aj vo FF dobre
Používateľov profilový obrázok
Puk1
Nový používateľ
Nový používateľ
Príspevky: 132
Dátum registrácie: So 21. Mar, 2009, 08:45
Bydlisko: Banská Bystrica

Re: Javascript na obrazok

Príspevok od používateľa Puk1 »

robin: Ale nie je to dynamicke vid http://puki.yw.sk/
robin
Nový používateľ
Nový používateľ
Príspevky: 21
Dátum registrácie: So 02. Jún, 2012, 17:03
Bydlisko: Poprad

Re: Javascript na obrazok

Príspevok od používateľa robin »

dynamické? Čo pod tým myslíš? Ak animáciu, tak to sa dá aj v CSSku urobiť jednoducho na pár riadkov. Ale keďže ja sa nezaoberám tvorbou stránok, tak tu neukážem príklad, môže to urobiť niekto skúsenejší :) alebo si to jednoducho vygooglite.
Používateľov profilový obrázok
glirpi
Používateľ
Používateľ
Príspevky: 1270
Dátum registrácie: Ne 09. Máj, 2010, 03:36
Bydlisko: Handlova / okres PD

Re: Javascript na obrazok

Príspevok od používateľa glirpi »

I♥C64 0,97Mhz CPU, 64KB RAM, VIC-II GPU (320x200 multicolor / 16 farieb) a aka zabava..
Spoiler: ukázať
PC: CPU: INTEL Core i5-9600KF / CPU-COOLER: NZXT Kraken X52 / MB: GIGABYTE Z390 M / RAM: Corsair 16 GB KIT DDR4 3600 MHz CL18 Vengeance LPX / SSD: WD Black SN750 NVMe SSD 1 TB / DVD-RW: - / PSU: Seasonic X-Series 560W / CASE: NZXT H400 / VGA: GIGABYTE GeForce RTX3060 GAMING OC 12GB / SOUND: SOUND BLASTER AE-7 / SPEAKERS: - / HEADPHONES: BEYERDYNAMIC DT 770 PRO (80 ohm) / LCD: DELL UltraSharp U2717D 27" / KEYBOARD: DELL Premier Wireless Keyboard / MOUSE: DELL KM717 / GAMEPAD: MICROSOFT Xbox 360 wireless controller / OS: MICROSOFT Windows 10 PRO 64Bit

Návrat na "Programovanie"