Ak by niekto o niecom takom vedel bol by som vdacny.
Dakujem.
Javascript na obrazok
-
Puk1
- Nový používateľ
- Príspevky: 133
- Dátum registrácie: So 21. Mar, 2009, 08:45
- Bydlisko: Banská Bystrica
Javascript na obrazok
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.
Ak by niekto o niecom takom vedel bol by som vdacny.
Dakujem.
Ak by niekto o niecom takom vedel bol by som vdacny.
Dakujem.
Re: Javascript na obrazok
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:AMD Ryzen 7 5700X3D, MB:Gigabyte B550M K, RAM:32GB G.SKILL DDR4 3200 MHz CL16, 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
-
Puk1
- Nový používateľ
- Príspevky: 133
- Dátum registrácie: So 21. Mar, 2009, 08:45
- Bydlisko: Banská Bystrica
Re: Javascript na obrazok
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
:/
http://serifaddons.com/slidingboxes.html
:/
-
Puk1
- Nový používateľ
- Príspevky: 133
- Dátum registrácie: So 21. Mar, 2009, 08:45
- Bydlisko: Banská Bystrica
Re: Javascript na obrazok
VYRIESENE !
Re: Javascript na obrazok
tak sa podel o riesenie 
myPC CPU:AMD Ryzen 7 5700X3D, MB:Gigabyte B550M K, RAM:32GB G.SKILL DDR4 3200 MHz CL16, 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
Re: Javascript na obrazok
to sa dá vyriešiť aj bez javascriptu jednoducho cez :hover v CSSku
-
glirpi
- Používateľ
- Príspevky: 1270
- Dátum registrácie: Ne 09. Máj, 2010, 03:36
- Bydlisko: Handlova / okres PD
Re: Javascript na obrazok
@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
slide.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
@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;
}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>
Kód: Vybrať všetko
background-image: url(img/transparent_box.png);-
Puk1
- Nový používateľ
- Príspevky: 133
- Dátum registrácie: So 21. Mar, 2009, 08:45
- Bydlisko: Banská Bystrica
Re: Javascript na obrazok
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.
A dakujem za radu. Zajtra to vyskusam. Mne HTML a CSS zatial staci JS sa mi ucit velmo nechce.
Re: Javascript na obrazok
Challenge accepted ;-)glirpiPc napísal:@robin: tak to by som chcel vidiet
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
-
Puk1
- Nový používateľ
- Príspevky: 133
- Dátum registrácie: So 21. Mar, 2009, 08:45
- Bydlisko: Banská Bystrica
Re: Javascript na obrazok
robin: Ale nie je to dynamicke vid http://puki.yw.sk/
Re: Javascript na obrazok
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.
alebo si to jednoducho vygooglite.