Moi,
Haluaisin tehdä DreamWeaverilla kotisivuille sellaisen ominaisuuden, että kun menen linkkikuvan päälle, sivun osiolle tulisi tekstiä (kuvana) mitä kyseinen linkki sisältää.
Eli näin:
Button A Button B Button C
Tähän alle tulisi teksti, joka on kuva, kun menen kyseisen buttonin päälle.
Summa summarum; Hotspotillahan saa buttonin kuvan muuttumaan, jos menen sen päälle - saako kuvaa muuttumaan MUUALLE kuin buttonin päälle?
Haluaisin tehdä DreamWeaverilla kotisivuille sellaisen ominaisuuden, että kun menen linkkikuvan päälle, sivun osiolle tulisi tekstiä (kuvana) mitä kyseinen linkki sisältää.
Eli näin:
Button A Button B Button C
Tähän alle tulisi teksti, joka on kuva, kun menen kyseisen buttonin päälle.
Summa summarum; Hotspotillahan saa buttonin kuvan muuttumaan, jos menen sen päälle - saako kuvaa muuttumaan MUUALLE kuin buttonin päälle?
Vastaukset 7
Vanhimmat
Tarkoittanet jotain tällaista:
http://www.meyerweb.com/eric/css/edge/popups/demo2.html
Siinä on samassa ohjeet.
Tosin nuo linkit eivät oikeastaan ole buttoneita vaan ihan tavallisia tekstilinkkejä.
Jeps, juuri tätä tarkoitin, tätä ei voi tehdä suoraan DreamWeaverilla? Menee aika vaikeaksi, kun mulla ei ole linkit tekstiä vaan kuvia. Kiitos kuitenkin tästä :-)
DW on kyllä siitä ihan asiallinen ohjelma että sillä pääsee suoraan sörkkimään koodia eikä se tykkää pahaa siitä.
Tietenkin voit laittaa esimerkin koodistas niin voin koittaa kehitellä siihen haluamasi.
SITÄPAITSI kaikki (myös linkit) kannattaa aina olla tekstinä, ne voi sitten laittaa näkymään kuvina selaimessa mutta tekstinä ne silti aina kannattaa olla.
Moi,
Olen tehnyt Photoshopilla tuollaiset hienot painikkeet ja haluaisin kyllä käyttää niitä :-)
Yritän tehdä asiasta yksinkertaisen, kun sitä itsekin olen :-)
Tämä koodi sisältää vain yhden painikkeen, joka vie koira.comin kotisivuille. Miten saisin homman tehtyä siten, että kun hemmo menee painikkeen päälle, tiettyyn kohtaan sivua tulisi esim. teksti "tämä linkki sisältää koiratietoutta jne. jne..."
Test page
Tänk juu :-)
Yksinkertainen on kaunista, sano.
Tällasen nätin kolmen linkin systeemin väsäsin. Doctypeksi laitat mitä haluat, tämä on ihan Strictiä tavaraa jos niikseen tulee (Metaosastoon link -elementtiin jos laitat lopetusmerkin niin toimii myös xhtml-Strictinä).
---------- index.html ----------
Test page
koirat.com
Tämä linkki sisältää koiratietoutta
|
kissat.com
Tämä linkki sisältää kissatietoutta
|
hevoset.com
Tämä linkki sisältää hevostietoutta
--------------------------------
Ja sitten css-osasto. Tämä on vähän pitempi mutta tätähän ei tarvi laittaa kun sen kerran ja tätä muokkaamalla muuttuu kaikki. En sitten kyllä validoinut tätä (Operalla, Firefoxilla ja IE:llä testasin) ja tässä ois vissiin muutakin säätämistä mutta kattele nyt kuitenkin.
----------- tyyli.css ----------
/* määritellään mihin linkkilista tulee */
div#links {
position: absolute;
top: 81px;
left: 10px;
}
/* määritellään linkin koko, sen pitää olla sama mikä sen linkkikuvan koko on */
div#links a {
display: block;
height: 100px;
width: 100px;
}
/* piilotetaan linkkien "span" -osat */
div#links a span {display: none;}
/* linkkikuvat */
.koira{background-image: url(koira.jpg);}
.kissa{background-image: url(kissa.jpg);}
.hevonen{background-image: url(hevonen.jpg);}
/* linkkien "hover" -kuvat */
div#links a:hover.koira {background-image: url(koira2.jpg);}
div#links a:hover.kissa {background-image: url(kissa2.jpg);}
div#links a:hover.hevonen {background-image: url(hevonen2.jpg);}
/* määritellään vähän "PopUp -tekstiä, IE:n takia jo tähän */
div#links a:hover {
background: #FFFFE0;
text-decoration: none;
}
/* tehdään (siitä piilotetusta) "span" -osasta näkyvä kun hiiren osoitin menee linkin päälle
ja määritellään sen koko ja sijainti muuta */
div#links a:hover span {
display: block;
position: absolute;
top: 180px;
left: 250px;
width: 125px;
height: 80px;
border: 1px solid Black;
padding: 10px;
text-align: center;
color: #411;
background: #FFFFE0;
}
/* piilotetaan linkkien erotinmerkki */
.piilota {display:none;}
Tämä kökköfoorumi ei todellakaan ole tarkoitettu html-koodin julkaisemiseen. Tämä siis muuttelee koodia: linkeissä EI TIETENKÄÄN kuulu olla noita puolipisteitä (eli ; -merkkejä) mutta minkäs teet kun ne ilmestyy tänne itsestään. Ota ne pois äläkä ihmettele sen enempää..
En kokeillut tuota vielä, mutta olen kyllä jo pelkästä koodista sanaton. KIITOS - jos tästä nyt kiittämällä selviää :-)