Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Info Coronavirus/Vaccinare vs Fake News

Ska-nk - Arata-i c-o iu…

Nu mi-au iesit analizele chiar ok.

Hub Macbook Air M1 - 144hz HDMI
 Pendulul Foucault

Golf 4 probleme difuzoare

Telecomanda StarLight

Bios nu recunoaste HDD si nu boot...
 Caști audio noise cancelling

[ANCOM] Un sfert dintre conexiuni...

Digitalizarea sistemului energetic

BOTSWANA premier league
 intrebare despre HFS+

Problema Netflix

Bosch Novatherm ZW20 picura apa

Tv-urile 8k ar putea disparea
 

Desighn la o pagina WEB

- - - - -
  • Please log in to reply
52 replies to this topic

#1
stocarul

stocarul

    Member

  • Grup: Members
  • Posts: 497
  • Înscris: 06.05.2007
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
glenda

glenda

    New Member

  • Grup: Members
  • Posts: 22
  • Înscris: 04.04.2007
poti sa faci in dreamweaver cu rollover image daca nu e prea old school pt tine...

#3
stocarul

stocarul

    Member

  • Grup: Members
  • Posts: 497
  • Înscris: 06.05.2007

View Postglenda, on May 6 2007, 20:19, said:

poti sa faci in dreamweaver cu rollover image daca nu e prea old school pt tine...

Pai nu prea stiu sa lucrez cu Dreamwaver...adika nu prea imi place...eu lucrez in notepad  :D daka poti sa-mi scri si mie functia aia care face ceea ce scrisai eu mai sus ca vreau

#4
xnoise

xnoise

    Active Member

  • Grup: Members
  • Posts: 1,310
  • Înscris: 08.02.2007
css rollover:

a { background:url(x.jpg); }
a:hover { background:url(y.jpg); }

ziceai ca stii html/css ???

#5
stocarul

stocarul

    Member

  • Grup: Members
  • Posts: 497
  • Înscris: 06.05.2007
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
Extinct

Extinct

    Senior Member

  • Grup: Senior Members
  • Posts: 9,079
  • Înscris: 24.02.2007
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
xnoise

xnoise

    Active Member

  • Grup: Members
  • Posts: 1,310
  • Înscris: 08.02.2007
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
Skelet

Skelet

    Active Member

  • Grup: Members
  • Posts: 1,376
  • Înscris: 30.11.2003

View Poststocarul, 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
Extinct

Extinct

    Senior Member

  • Grup: Senior Members
  • Posts: 9,079
  • Înscris: 24.02.2007
<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
xnoise

xnoise

    Active Member

  • Grup: Members
  • Posts: 1,310
  • Înscris: 08.02.2007
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
stocarul

stocarul

    Member

  • Grup: Members
  • Posts: 497
  • Înscris: 06.05.2007
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
xnoise

xnoise

    Active Member

  • Grup: Members
  • Posts: 1,310
  • Înscris: 08.02.2007
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
Extinct

Extinct

    Senior Member

  • Grup: Senior Members
  • Posts: 9,079
  • Înscris: 24.02.2007
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
stocarul

stocarul

    Member

  • Grup: Members
  • Posts: 497
  • Înscris: 06.05.2007
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
Extinct

Extinct

    Senior Member

  • Grup: Senior Members
  • Posts: 9,079
  • Înscris: 24.02.2007

View Poststocarul, 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.


#16
stocarul

stocarul

    Member

  • Grup: Members
  • Posts: 497
  • Înscris: 06.05.2007
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

#17
Extinct

Extinct

    Senior Member

  • Grup: Senior Members
  • Posts: 9,079
  • Înscris: 24.02.2007

View Poststocarul, 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.


#18
stocarul

stocarul

    Member

  • Grup: Members
  • Posts: 497
  • Înscris: 06.05.2007
K...Merci mult pentru ajutor

Anunturi

Chirurgia cranio-cerebrală minim invazivă Chirurgia cranio-cerebrală minim invazivă

Tehnicile minim invazive impun utilizarea unei tehnologii ultramoderne.

Endoscoapele operatorii de diverse tipuri, microscopul operator dedicat, neuronavigația, neuroelectrofiziologia, tehnicile avansate de anestezie, chirurgia cu pacientul treaz reprezintă armamentarium fără de care neurochirurgia prin "gaura cheii" nu ar fi posibilă. Folosind tehnicile de mai sus, tratăm un spectru larg de patologii cranio-cerebrale.

www.neurohope.ro

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Forumul Softpedia foloseste "cookies" pentru a imbunatati experienta utilizatorilor Accept
Pentru detalii si optiuni legate de cookies si datele personale, consultati Politica de utilizare cookies si Politica de confidentialitate