☰

» »

HTML povecava slike na hover over

HTML povecava slike na hover over

SmeskoSnezak ::

Zanimivo je, kako vse kar najdem je html+css. Nimam pa ideje, kako bi spisal kodo , samo html kodo, ki bi isto sliko , ko gres z misko prek nje, povecala. Nekaj sem se igrackal, a cist neuspesno. Kaksna ideja?
@ Pusti soncu v srce... @

Gandalfar ::

Ne mores. Temu je CSS namenjen.

Kaj te tale :hover selektor tako boli? :)

Zgodovina sprememb…

MisterR ::

http://www.dreamweaverclub.com/dreamwea...

SmeskoSnezak ::

Ne, iscem enostavno idejo, kako bi samo s html-jem lahk to naredil, ker bi rad brez .css fajlov naredil. A torej ne gre? Kako pa zgleda html + css skupaj na spletni strani za tole? Tukajle sem nasel nekaj, kar je dokaj enostavno, ampak ne razumem zakaj ima hyperlink na spletne strani narejeno. 
<a class="thumbnail" href="introduction.php">
 <img src="images/littleegret50x50.jpg" alt="Little Egret" width="50px" height="50px" border="0"><span><img src="images/littleegret200x200.jpg" alt="Little Egret"><br> Little&nbsp;Egret</span></a>

Sem probal brez < a komande pa mi ne dela. Pokaze mi obe sliki , eno malo, eno vecjo.

update: Lahko bi verjetno probal imeti css pred html-jem na sami strani. Je to res toliko bolse?
@ Pusti soncu v srce... @

Zgodovina sprememb…

Gandalfar ::

Tole k si polinku je s CSS-jem narejeno.

Ce hoces met samo en file daj css v head: http://webdesign.about.com/od/css101cla...

SmeskoSnezak ::

Hmm... torej naredim takole: 
<head>
 <title>Test</title>
 <style type="text/css">
 <!--
 #picture {width:100px;}
 #picture a.small, #picture a.small:visited { display:block; width:100px; text-decoration:none; background:#ffffff; top:0; left:0; border:0;}
 #picture a img {border:0;}
 #picture a.small:hover {text-decoration:none; background-color:#000000; color:#000000;}
 #picture a.large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
 #picture a.small:hover .large {display:block; position:absolute; top: 90px; left:150px; width:200px;}
 -->
</style>
</head>


In potem naprej v kodi se tole:
 <div id="test">
 <a class="small" href="#nogo" title="small image">
 <img src="urlslike" title="small image" />
 <img class="large" src="urlslike" title="large image" /></a>
 </div>

Rad bi čimmanj navlake... če česa ne potrebujem v kodi, bi prosil, da poveste.

A prav razumem? Saj src lahk kaže na isto sliko, ne? Ponekod v primerih sem našel da imajo dve razlicni sliki.
@ Pusti soncu v srce... @

Zgodovina sprememb…

para! :: 

<html>
<head>
 <title></title>
 <style type="text/css">
    img:hover{
     width: 390px;
     height: 390px;  
    }
</style>
</head>

<body>
    <img src="http://www.happynews.com/living/livingimages/cover-feline.jpg" alt="Funny" width="100px" height="100px"/>
</body>
</html>

Primer

Dela v novejših Chrome/FF/Opera/Safari browserjih, ne vem za IE. :hover je w3c požegnal za _vse_ elemente, tako da je standardno ustrezno, tud če ne gre za anchor elemente.
Death before dishonor!

Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
!

Vse, kar ste si želeli vprašati o CSS, pa si niste upali. (strani: 1 2 3 4 … 23 24 25 26 )

Oddelek: Izdelava spletišč		1298349410 (8547) sunniegoldie
»

Trdovratne težave v HTML/CSS-ju (strani: 1 2 )

Oddelek: Programiranje		888674 (6652) joker16_7
»

Ocena? Kako bi dodal podstrani?

Oddelek: Pomoč in nasveti		6917 (782) shadeX
»

CSS problemi (strani: 1 2 )

Oddelek: Izdelava spletišč		519928 (7727) nuuush
»

CSS Problem

Oddelek: Izdelava spletišč		301517 (1178) Maverick33

Več podobnih tem