ugrás a tartalomhoz

Link divben beállított háttérképpel

Anonymous · 2005. Júl. 16. (Szo), 12.51
Van egy ilyen kód:

<style type="text/css">
.button1 {background: url('image1.gif') no-repeat; height: 40px;}
.button2 {background: url('image2.gif') no-repeat; height: 40px;}
</style>

-<div class="button1" onmouseover="this.className='button2'"
onmouseout="this.className='button1'">
</div>

Erre hogyan tegyek linket?
‹ CSS menü listával - működik, csak kis finomítás kellene Szövegszerkesztő fejlesztése textarea-hoz ›
 ■
1

ha már...

kgyt · 2005. Júl. 16. (Szo), 13.07
Ha már úgyis eseménykezelőkkel operálsz, akkor az onclick a te megoldásod.
Nem javaslom ezt a dolgot erőltetni.
Egy sima szöveges linknek is adhatsz háttérképet...

--
Szeretettel: Károly György Tamás
kgyt(a)kgyt.hu - http://kgyt.hu
2

THX

Anonymous · 2005. Júl. 16. (Szo), 13.20
Kösz a tippet, az onclick-re nem is gondoltam.
De mit nem kell erőltetni?
3

Így jobb...

kgyt · 2005. Júl. 16. (Szo), 13.29
<a href="/link" class="button"><span>felirat</span></a>
.button {
  background: transparent url('image1.gif') no-repeat left top;
  height: 40px;
  display: block;
  text-decoration: none;
}
.button:hover {
  background-image: url('image2.gif');
}
@media screen {
  .button span {
    display: none;
  }
}
Így css-t és javascriptet nem ismerő böngészőkben is működik a link...
--
Szeretettel: Károly György Tamás
kgyt(a)kgyt.hu - http://kgyt.hu
4

Vannak még olyanok?

Anonymous · 2005. Júl. 18. (H), 11.08
Vannak még olyanok?
5

vannak

Anonymous · 2005. Júl. 18. (H), 12.42
PDA-k, mobilok.
6

"javascriptet nem ismerik"

Anonymous · 2005. Júl. 18. (H), 13.27
A PDAk, mobilok altalaban ismerik - csak nem értelmezik ;-)
(a P900asom kiírja: "Javascript oldal"
És mellesleg javascriptes az összes telefonszám tudakozó, úgyhogy toll a fülükbe, mert telefonról nem tudom használni őket...)

TeeCee :o)
7

Előfordulnak...

kgyt · 2005. Júl. 18. (H), 23.40
WebTV (hibásan és részlegesen)
Linx (a links már tud valamennyi javascriptet)
IBrowse (Amiga, hibás js és css)
stb.
és a már említett PDA-s és mobiltelefonos böngészők...
Persze amelyik mobilra van Opera, ott azt érdemes használni...


--
Szeretettel: Károly György Tamás
kgyt(a)kgyt.hu - http://kgyt.hu
8

Anonymous · 2005. Júl. 19. (K), 14.22
<div class="button2" onmouseover="this.className='button1'" onmouseout="this.className='button2'" onclick="location.href='link.htm'">

Erre a kódrészletre nnem lehet rátenni a javasolt <span>felirat</span> parancsot?
9

ami link legyen link

Jano · 2005. Júl. 19. (K), 22.22
Felejtsed el ezt a javascriptes onclicket! Én a legtobb linket az egér középső gombjával nyitom meg új tabbra és ezzel valószínűleg nem vagyok egyedül. Az ilyen javascriptes ügyeskedések ezt mind megakadályozzák!
10

keresők

Hojtsy Gábor · 2005. Júl. 19. (K), 22.26
Arról nem is beszélve, hogy a kereső indexelője sem követi.
11

Szerintetek?

Anonymous · 2005. Júl. 20. (Sze), 10.03
Akkor szerintetek hagyan kellene? Javaslat? Egyébként meg amiket eddig próbáltam, azokkal gondok voltak. Például csak maximum 3 gombot tudott kezelni, túl hosszú lett úgy a html és a css kód.
12

Hmm...

kgyt · 2005. Júl. 20. (Sze), 10.18
Amit a 3. bejegyzésben írtam, az miért nem jó?

--
Szeretettel: Károly György Tamás
kgyt(a)kgyt.hu - http://kgyt.hu
13

1. Túl nagy m,éretű lett

Anonymous · 2005. Júl. 20. (Sze), 10.41
1. Túl nagy m,éretű lett úgy a css fájl (különösen ha több mint 20 gombot kellene beraknom)
2. 3 gombot tudott még úgy kezelni, de a negyediket, ötödiket, stb. már csak a hover képét jelenítette meg, tehát ha a kép helyére ráálltunk.
3. A hover funkció nem jól működött, tehát ha a gombra rákattintottunk, és az egeret egyszerre elhúztuk, a kép a hovert mutatta, ennél a fajtánál egszerre visszavált, de az is előfordult, hogy nemm vált vissza.
14

indok cafolatok

Jano · 2005. Júl. 20. (Sze), 12.10
1. Nagy meretu CSS?

a) Minden gombra nem kell megadni minden egyes CSS tulajdonsagot csak a hatterkepet.

b) A CSS-t pontosan egyszer tolti le a bongeszo mig a te onmousoveres mokadad minden egyes menuhoz, minden egyes oldalon le kell tolteni mert a HTML-ben van! Szamold ki!

2. Te szurtal el valamit! Hogyhogy csak 3 kepet? Allits a mereteken!

3. Nem a hover funkcioval van baj hanem a kezelovel: a lenyomom a gombot es elhuzom az egeret az nem kattintas hanem dragndrop (huzd es ejtsd) esemeny kezdete! Ha a gombod valoban gombnak fog kinezni akkor a felhasznalok kattintani fognak ra es eszukbe se jut huzigalni!
15

Újabb probléma

Anonymous · 2005. Júl. 22. (P), 10.04
A kgyt féle kódot használom (3. bejegyzés), külsőre ugyanazt tudja, mint az onmouseoveres mókázásom, de:
Az összes oldaslamba csak egy css lesz beállítva, és azt a kgyt kódjával nem
lehet megcsinálni, hogy az eggyik oldalon a .buttom index1.gif-et mutat, a
hover pedig az index2.gif-et, A másik oldalon pedig fordítva.
Segítsetek!
16

class, id

attlad · 2005. Júl. 22. (P), 10.41
az eggyik oldalon a .buttom index1.gif-et mutat, a
hover pedig az index2.gif-et, A másik oldalon pedig fordítva.

<body id="main">


<body id="contact">


#main .button {
  /* index1.gif */
}

#contact .button {
  /* index2.gif */
}
Így oldalanként mást tudsz beállítani, bár kérdés, hogy ez mire is jó.

Viszont ha csak egyiknek kell más stílus egyszerűbb így:

<a href="/link" class="button"><span>felirat</span></a>
<a href="/link" class="button current"><span>felirat</span></a>
<a href="/link" class="button"><span>felirat</span></a>
CSS-ben .current-nek adsz fordítva stílust.

Attila
17

Thanks

Anonymous · 2005. Júl. 22. (P), 10.50
Köszönöm a segítséget!
18

Még egy kérdés

Anonymous · 2005. Júl. 23. (Szo), 11.09
A <a href="/link" class="button current"><span>felirat</span></a> kódba a button current-et hogyan állítsam be. Mit írjak a CSS-be?
19

.current

attlad · 2005. Júl. 23. (Szo), 11.27
A .button és a .current kiválasztó is érvényes rá külön külön.

.button {
    color: blue;
}

.current {
    color: red;
}
Attila
20

Ehez mit szóltok?

Anonymous · 2005. Júl. 24. (V), 10.12
Ehez mit szóltok:

<STYLE type=text/css>
.button_index {background: url('index1.gif') no-repeat; height: 40px; display: block;}
.button_index_current {background: url('index2.gif') no-repeat; height: 40px; display: block;}
.button_index_current:hover {background-image: url('index1.gif');}
.button_index:hover {background-image: url('index2.gif');}

@media screen {
		.button_index span {display: none;}
		.button_index_current span {display: none;}
}

</STYLE>

<a href="/index.html" class="button_index"><span>Honlap</span></a>
<a href="/index.html" class="button_index_current"><span>Honlap</span></a>
Nekem ez jó, mert így az összes gombhoz tudok fordított (eltérő) valamit rendelni (ha jól értettem, a .currrent-et csak egyszer lehet megadni, tehát csak egy gombhoz), habár ez nemn pont az, amit javasoltatok.