Desighn la o pagina WEB
Last Updated: Jan 02 2008 13:17, Started by
stocarul
, May 06 2007 17:43
·
0
#1
Posted 06 May 2007 - 17:43
Salutare din partea mea...Sunt un incepator, dar vreau sa fac o pagina de web. Cunosc HTML, CSS cat si putin PHP. Dar nu stiu cum sa fac k atunci cand vizitatorul se duce cu mouseul pe meniu (buton), sa-l schimbe cu altul. Deci in mod normal sa fie <img src="01.jpg">, iar cand se duce cu mouseul peste el sa apara <img src="02.jpg">. Din cate am inteles acest lucru se face in css. Va multumesc anticipat.
|
#2
Posted 06 May 2007 - 20:19
poti sa faci in dreamweaver cu rollover image daca nu e prea old school pt tine...
|
#3
Posted 06 May 2007 - 20:30
#4
Posted 06 May 2007 - 21:39
css rollover:
a { background:url(x.jpg); } a:hover { background:url(y.jpg); } ziceai ca stii html/css ??? |
#5
Posted 06 May 2007 - 21:43
Merci mul...reusisem si cu Dreamwaver...dar nu prea imi placea pentru ca folosea javascript. E mult mai bine cu CSS...si da stiu. Merci mult
|
#6
Posted 06 May 2007 - 21:48
pai poti sa faci in doua feluri: cu Javascript, sau cu CSS
Cu Javascript nu stiu pe dinafara, asa ca o sa trec direct la CSS, care e SEO friendly si nu foloseste Javascript La un link, in CSS, poti sa atribui 4 pseudo-clase(merci XNOISE): link, hover, active si visited. Sincer sa fiu, nu sunt necesare decat 2 state-uri: link si hover. In CSS arata cam asa: a:link{ display:block; height:20px; width:80px; background:url(imagine1.gif) top left no-repeat; } a:hover{ display:block; height:20px; width:80px; background:url(imagine2.gif) top left no-repeat; } Evident, poti sa modifici dimensiuni si sa mai adaugi alte proprietati (font, culoare, etc) Ce te mai sfatuiesc, este ca un meniul sa-l faci lista, pentru a putea fi "citit" mai usor de motoarele de cautare.Cam asa ar trebui sa arate in HTML <ul id="menu"> <li><a href="link1">link1</a></li> <li><a href="link2">link2</a></li> <li><a href="link3">link3</a></li> <li><a href="link4">link4</a></li> <span class="clr"></span> </ul> Pentru ca meniul sa fie orizontal si sa nu iti apara "bullets", in CSS scrii cam asa: #menu{ position:relative; list-style:none; margin:0; padding:0 } #menu li{ float:left; margin;0; padding:0; } .clr{ height:1px; width:1px; margin-left:-1px; margin-top;-1px; font-size:1px; clear:both; } Sper ca e destul de clar. Bafta! Edited by filip.serban, 06 May 2007 - 21:59. |
#7
Posted 06 May 2007 - 21:49
invata pseudo-clasele si pseudo-elementele din css. or sa iti fie de mare mare ajutor pe viitor. asta cu stiutul e relativa. cineva care zice ca stie html/css si nu stie ce se poate face cu :hover nu prea imi da impresia ca ar sti html/css.
|
#8
Posted 06 May 2007 - 21:50
stocarul, on May 6 2007, 17:43, said: Salutare din partea mea...Sunt un incepator, dar vreau sa fac o pagina de web. Cunosc HTML, CSS cat si putin PHP. Dar nu stiu cum sa fac k atunci cand vizitatorul se duce cu mouseul pe meniu (buton), sa-l schimbe cu altul. Deci in mod normal sa fie <img src="01.jpg">, iar cand se duce cu mouseul peste el sa apara <img src="02.jpg">. Din cate am inteles acest lucru se face in css. Va multumesc anticipat. http://www.htmldog.c...cles/rollovers/ a { display: block; width: 200px; height: 63px; background-image: url(images/toucancombo.jpg); text-decoration: none; text-indent: -999em; } a:hover { background-position: bottom; } trebuie să ai un singur fișier care conține 2 imagini una sub alta, de exemplu: [ http://www.htmldog.com/examples/images/toucancombo.jpg - Pentru incarcare in pagina (embed) Click aici ] |
#9
Posted 06 May 2007 - 22:06
<ul id="menu">
<li><a href="link1">link1</a></li> <li><a href="link2">link2</a></li> <li><a href="link3">link3</a></li> <li><a href="link4">link4</a></li> </ul> <span class="clr"></span> spanu' in afara listei. hai ca m-a facut Xnoise praf :P Edited by filip.serban, 06 May 2007 - 22:06. |
#10
Posted 06 May 2007 - 22:07
stupid method. in primul rand text-indent:-999 este un nasty hack, care nu este deloc necesar. in loc de un text acolo, poti folosi foarte bine un spatiu, invizibil de altfel. in afara de asta, este o tehnica obisnuita pt keyword stuffing, asa ca => bad. in al doilea rand, pe anumite browsere da reactii adverse, daca nu este utilizat impreuna cu overflow.
in al treilea rand, rolloverul dat de mine mai sus functioneaza perfect, asa ca nu cred ca e nevoie de o chestie mai complicata (am cam uitat sa adaug display:block pe a). PS: incercati sa nu mai copiati cuvant cu cuvant ce scrie undeva, ci sa testati voi. daca sunteti destul de priceputi, probabil veti gasi o solutie mai buna. PS2: htmldog.com era un site bun, dar vad ca mai are si erori. asta e. bagat rolloverele pe lista neagra. Edited by xnoise, 06 May 2007 - 22:09. |
|
#11
Posted 07 May 2007 - 16:08
Eu as mai vrea daca se poate sa se modifice poza la trecerea mouselui peste ea, fara ca aceasta sa aiba vre-un link, si folosind CSS
|
#12
Posted 07 May 2007 - 16:38
teoretic pseudo-clasa hover se aplica oricarui element. adica poti avea div si div:hover cu 2 imag diferite. din pacate IE nu suporta :hover decat pe link-uri. pt alte elemente iti trebuie un htc (behavior) (google pt htc hover behavior). pe orice alt browser merge fara. (sau aproape pe price alt browser).
o alta metoda e sa pui pe link-ul respectiv cursor:default (astfel desi ai un link in spate, nu se va remarca diferenta). |
#13
Posted 07 May 2007 - 16:54
Uita-te la fisierele atasate.
Datorita faptului ca IE6 nu suporta :hover decat pe link-uri (a), trebuie un mic script facut de un baiat destept. Uite, aici spune el ce si cum. Atasat ai si fisierul descris, dar e bine sa citesti si ce spune el. Ca sa ti se valideze codul, am folosit comentarii conditionale. Bafta. Edited by filip.serban, 07 May 2007 - 16:57. |
#14
Posted 07 May 2007 - 18:13
Da de ce e necas acel script imens...eu nu am inteles mare lucru din siteurile la care mai trimis pt k eu nu stiu engleza :confuzzled:
|
#15
Posted 07 May 2007 - 18:38
stocarul, on May 7 2007, 19:13, said: Da de ce e necas acel script imens...eu nu am inteles mare lucru din siteurile la care mai trimis pt k eu nu stiu engleza :confuzzled: 1. si eu si Xnoise ti-am explicat pentru ce e acel script. 2. Fara sa stii engleza, mai bine te lasi de domeniul asta. Nu iti recomand sa te lasi, ci sa te apuci de engleza. Adica aici te putem ajuta punctual: "cutare nu imi face nu stiu ce", dar sama apuc sa-ti traduc ce e acolo si sa iti explic toate bazele... sorrry, nu o fac. Din simplul motiv ca nu am timp. Edited by filip.serban, 07 May 2007 - 18:42. |
|
#17
Posted 07 May 2007 - 18:46
stocarul, on May 7 2007, 19:41, said: Pai eu am vazut ca functioneaza si fara acel script imens si cu IE 7, Opera si Mozilla Firefox, deci???...pentru ce e acel script...asta in cazul in care vrei sa ma ajuti sa inteleg si eu :D pai din cate ti-am spus mai devreme poti sa observi ca IE6.5 si mai jos nu suporta :hover decat pe linkuri. Deci, scriptul ala e facut ca sa mearga si pe IE6 care inca detine 38% din piata. Got it? Edited by filip.serban, 07 May 2007 - 18:47. |
Anunturi
Bun venit pe Forumul Softpedia!
▶ 0 user(s) are reading this topic
0 members, 0 guests, 0 anonymous users