Vlozeni obrazku


Obrázek s názvem obrazek.jpg, který máme ve složce obrazky (samozřejmě nahráno na webhostingu, ne ve složce na počítači) vložime do HTML dokumentu následujícím kódem:

<img src="./images/obrazek.jpg">

Obrázku můžeme definovat ještě několik vlastností: obrázek je bez okraje, široký 300px a výšku má 200px (ale při zadávání obou hodnot, šířky i výšky, pozor na deformaci)

<img src="obrazky/fotka.jpg" border="0" width="300" height="200" alt="popis obrázku">
 
Zarovnání obrázku
Možné hodnoty pro align jsou align="left" align="center" align="right"
 
<img src="obrazky/fotka.jpg" align="center">

 


Rámeček obrázku

Vytvoří rámeček kolem obrázku

<img src=”obrazek.jpg” _fcksavedurl="”obrazek.jpg”" border=”1”>

 

Jezdící obrázky do sloupku

<marquee><img src="ADRESA OBRÁZKU" _fcksavedurl="ADRESA OBRÁZKU"></marquee>

 


<marquee direction=right width=40%><img src="ADRESA OBRÁZKU" _fcksavedurl="ADRESA OBRÁZKU"></marquee> <marquee width=40%><img src="ADRESA OBRÁZKU" _fcksavedurl="ADRESA OBRÁZKU"></marquee>

 


Změna obrázku po najetí myši

<img src=" url prvního obrázku " onmouseover="this.src=' url druhého obrázku ';" onmouseout="this.src='ZNOVU url prvního obrázku ';">


Pohyb obrázků

<div align=center> <table width=400 border=0 align=center> <tr> <td> <marquee width=400> <img src=URL _fcksavedurl="URL" _fcksavedurl="URL" _fcksavedurl=URL OBRÁZKU /> <img src=URL _fcksavedurl="URL" _fcksavedurl=URL OBRÁZKU /> <img src=URL _fcksavedurl="URL" _fcksavedurl=URL OBRÁZKU /> </marquee> </td> </tr> </table> </div>

 

Jezdící tabulka na obrázky


<div align=center> <table width=400 border=0 align=center> <tr> <td> <marquee width=400> <img src=HTML _fcksavedurl="HTML" _fcksavedurl="HTML" vašeho obrázku /> <img src=HTML _fcksavedurl="HTML" vašeho obrázku/> <img src=HTML _fcksavedurl="HTML" vašeho obrázku /> </marquee> </td> </tr> </table> </div>

 


Pozice obrázku

<img src="obrazek.gif" align="left" >

» Atribut ALIGN se upravuje podle polohy :

1 TOP - obrázek se zarovná s horním řádkem textu
2 MIDDLE - obrázek je k řádce svisle vycentrován
3 BOTTOM - obrázek se zarovná s dolní řádkou textu
4 LEFT - obrázek je u levého okraje stránky a obtékán textem
5 RIGHT - obrázek je u pravého okraje stránky a obtékán textem

 

Průhlednost obrázku

<img src="obrazek.jpg" border="20) }">

Průhlednost lze regulovat číslem opacity, tento efekt lze použít také u tabulek.

 


Obrázek na pozadí

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Language" content="cs">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>Stránka s obrázkem na pozadí</title>
</head>
<body background="obrazek.gif">
Tato stránka bude mít na pozadí obrázek...
</body>
</html>

CSS obrazové filtry


Alfa kanálu
<img src="IMAGE URL" style="Filter: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)">


To změní neprůhlednost image. 100 je zcela viditelný, a 0 je neviditelná.

 


Motion Blur
<img src="IMAGE URL" style="Filter: Blur(Add = 0, Direction = 225, Strength = 10)">
<img src="IMAGE URL" style="Filter: FlipV">


Překlopit svisle
<img src="IMAGE URL" style="Filter: FlipH">


Horizontální Vertikální
<img src="IMAGE URL" style="Filter: Gray">


Gray Scale
<img src="IMAGE URL" style="Filter: Invert">


Invertovat
<img src="IMAGE URL" style="Filter: Wave(Add=0, Freq=5, LightStrength=20, Phase=220, Strength=10)">


Vlna
<img src="IMAGE URL" style="Filter: xray">


Filtry práce v aplikaci Internet Explorer pouze!

 

Obrázek Transparentnost

<Img src = "URL OBRAZKU" style = "opacity: 0,4; filtr: alpha (opacity = 40)" onmouseover = "this.style.opacity = 1; this.filters.alpha.opacity = 100" onmouseout = "this.style.opacity = 0,4; this.filters.alpha.opacity = 40" />

 

Měnící se obrázek

 <html>
<head>
<title>Rotace obrázků</title>
<script language="javascript">
<!--
doba=5000
pocet = 4
rotator=0
obrsrc = new Array(pocet)
cesta =new Array(pocet)
obrsrc[0]="obrazek1.gif"; cesta[0]="
http://www.archv.7x.cz";
obrsrc[1]="obrazek2.gif"; cesta[1]="
http://www.archv.7x.cz";
obrsrc[2]="obrazek3.gif"; cesta[2]="
http://www.archv.7x.cz";
obrsrc[3]="obrazek4.gif"; cesta[3]="
http://www.archv.7x.cz";
obr = new Array(pocet);
for (i=0; i < pocet; i++){
obr[i]= new Image();
obr[i].src= obrsrc[i] _fcksavedurl=" obrsrc[i]"
}
function rotate() {
if (rotator==pocet) {rotator=0;}
document.images["obraz"].src = obrsrc[rotator];
rotator = rotator + 1
window.setTimeout('rotate();',doba);
}
function poslat() {
window.location=cesta[rotator-1];
return false;
}
//--></script>
</head>
<body onLoad="rotate();">
<a
href="
http://www.archv.7x.cz" onclick="return poslat();">
<img name="obraz" src="obrazek1.gif" border="0" width="150" height="150"></a>
</body>
</html>

 

TOPlist

Archiv.7x.cz©

Můj BANNER

Min: : Sec

 


 




Name
Email
Comment
Or visit this link or this one