Jump to content

Cum Creati Rollover Image In Css ?


gaby

Recommended Posts

In primul rand trebuie sa aveti doua poze, de exemplu:

Buton1:

buton1wh6.png

Buton2:

buton2fh4.png

Apoi adaugati intr-o pagina html codul de mai jos:

<html>
<head>
<style type="text/css">
a.image {
display: block;
width: 145px;
height: 29px;
background-image: url(buton1.bmp);
background-repeat: no-repeat;
}

a.image:hover {
background-image: url(buton2.bmp);
}
</style>
</head>
<body>
<center>
<a class="image" href="http://pctroubleshooting.o" target="_blank"></a><br>
</center>
</body>
</html>[/html]

Click [b][color=red]aici[/color][/b] pentru a vedea rezultatul.

  • Upvote 1

Te-ai inregistrat? Ne-ar placea sa te prezinti.

Cum pot sustine forumul?
Cumpara de la eMag folosind acest link.
--------------------
oG2BN9d.gifse1WdXd.gifQG6MtmI.gifRHYjDzD.gifG5p1wui.gif

Link to comment
Share on other sites

  • 2 months later...

Un rollover ceva mai destept se face javascript. Daca ati observat cand duci mouse-ul pe imagine prima oara atunci incepe sa incarce imaginea a 2a si in majoritatea cazurilor se vede ca a 2a imagine intra cu intarziere.

Noua webmasterilor ne cam e rusine cu asa ceva asa ca daca vrem sa ocolim situatia aceasta folosim javascript pentru a descarca si cea de a 2-a poza la descarcarea paginii de pe server si asa se evita intarzierea aparitiei imaginii 2.

Nu o sa incep sa explic faza asta la sectiunea css, dar daca vrei sa realizezi un rollover cu javascript iti recomand sa folosesti Adobe(ex. Macromedia) Dreamweaver, il realizezi in 3 clickuri. ;)

Link to comment
Share on other sites

  • 4 years later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.