Søg
Avatar billede hooh Nybegynder
30. juni 2004 - 10:19 Der er 16 kommentarer og
2 løsninger

tekst knapper

hej

jeg har set nogle knapper på dette link http://webfx.eae.net/dhtml/coolbutton2/demo.html

hvordan kan jeg lave nogle knapper som ligner dem.
De skal bare kunne lave en mouseover og mouseclick på samme måde.


Den kode man får den ovennævnte side er meget stor og jeg ønsker ikke alle de funktionaliter som de giver.
Avatar billede krydset Nybegynder
30. juni 2004 - 10:37 #1
Prøv og se hvad jeg fik frem ved at højreklikke og trykke vis kilde, præcist hvordan du laver dem.

og du kan osse en anden gang bare højreklikke og trykke viskilde


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title></title>
<link type="text/css" rel="StyleSheet" href="cb2.css">
<script type="text/javascript" language="JavaScript1.5" src="../ieemu/ieemu.js"></script>
<script type="text/javascript" src="cb2.js"></script>

<style>

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

html {
    height:        100%;
    background: ButtonFace;
}

body {
    overflow:    auto;
    margin:        0;
    padding:    0;
    height:        100%;
    color:        ButtonText;
    font:        MessageBox;
    border:        0;

}

table {
    border: 2px groove;
    margin:    10px;
}

p {
    margin: 10px;
}

/* Overriding style for one of the tables */

#blueTable {
    background-color: rgb(120,172,255);
}

#blueTable td {
    background-color: Transparent;
}

#blueTable .coolButtonUpDisabled,
#blueTable .coolButtonActiveDisabled,
#blueTable .coolButtonDisabled {
    color:        rgb(60,86,128);
}

#blueTable .coolButtonUpDisabled .coolButtonDisabledContainer,
#blueTable .coolButtonActiveDisabled .coolButtonDisabledContainer,
#blueTable .coolButtonDisabled .coolButtonDisabledContainer {
    background:  rgb(60,86,128);

}

#blueTable .coolButtonUpDisabled .coolButtonDisabledContainer .coolButtonDisabledContainer,
#blueTable .coolButtonActiveDisabled .coolButtonDisabledContainer .coolButtonDisabledContainer,
#blueTable .coolButtonDisabled .coolButtonDisabledContainer .coolButtonDisabledContainer {
    background:    Transparent;
}
</style>

<style disabled="disabled" id="mozGrooveCSS">

/* Mozilla does not understand disabled stylesheets but
* for forward compatibility I'll enabled it using js
* below
*/

body {
    font:                Message-Box;
    -moz-user-select:    none;
}

table {
    border: 2px groove ButtonFace;
}

</style>
<script language="JavaScript1.5">
if (window.moz == true) document.getElementById("mozGrooveCSS").removeAttribute("disabled");

</script>
</head>
<body onselectstart="return false" ondragstart="return false">

<p>Below table is just to test the looks of the 7 (+3 for Moz/IE) different states.</p>

<table style="background: ButtonFace;" cellspacing="1">
<tr>
    <td class="coolButton"><img src="images/foldericon.gif" align="absmiddle"> Button 0</td>
    <td class="coolButtonHover"><img src="images/foldericon.gif" align="absmiddle"> Button 1</td>
    <td class="coolButtonActiveHover"><img src="images/foldericon.gif" align="absmiddle"> Button 2</td>
    <td class="coolButtonActive"><img src="images/foldericon.gif" align="absmiddle"> Button 3</td>
    <td class="coolButtonDisabled"><span class='coolButtonDisabledContainer'><span class='coolButtonDisabledContainer'><img src="images/foldericon.gif" align="absmiddle"> IE</span></span></td>
    <td class="coolButtonActiveDisabled"><span class='coolButtonDisabledContainer'><span class='coolButtonDisabledContainer'><img src="images/foldericon.gif" align="absmiddle"> IE</span></span></td>
    <td class="coolButtonUpDisabled"><span class='coolButtonDisabledContainer'><span class='coolButtonDisabledContainer'><img src="images/foldericon.gif" align="absmiddle"> IE</span></span></td>
    <td class="coolButtonDisabled"><img src="images/foldericon.gif" align="absmiddle"> MOZ</td>
    <td class="coolButtonActiveDisabled"><img src="images/foldericon.gif" align="absmiddle"> MOZ</td>
    <td class="coolButtonUpDisabled"><img src="images/foldericon.gif" align="absmiddle"> MOZ</td>
</tr>
</table>
<p>Below is a table where each cell is a CoolButton. Button 2,3 and 5 have toggle. Button
3 and 5 start with a value of true. Button 4 and 5 are disabled. The buttons are stored in
an array called <code>cells</code></p>
<table id="blueTable" cellspacing="1">
<tr>
    <td class="coolButton" onaction="alert(event)"><img src="images/foldericon.gif" align="absmiddle"> Button 0</td>
    <td class="coolButton"><img src="images/foldericon.gif" align="absmiddle"> Button 1</td>
    <td class="coolButton"><img src="images/foldericon.gif" align="absmiddle"> Button 2</td>
    <td class="coolButton"><img src="images/foldericon.gif" align="absmiddle"> Button 3</td>
    <td class="coolButton"><img src="images/foldericon.gif" align="absmiddle"> Button 4</td>
    <td class="coolButton"><img src="images/foldericon.gif" align="absmiddle"> Button 5</td>
</tr>
</table>

<script>

var cells = document.getElementsByTagName("TABLE")[1].rows[0].cells;
for (var i = 0; i < cells.length; i++)
    createButton(cells[i]);

cells[2].setToggle(true);

cells[3].setToggle(true);
cells[3].setValue(true, true);    // don't trigger onchange

cells[4].setEnabled(false);

cells[5].setEnabled(false);
cells[5].setToggle(true);
cells[5].setValue(true, true);    // don't trigger onchange

</script>

<p>Below is a table where each cell is a CoolButton. Button 2,3 and 5 have toggle. Button
3 and 5 start with a value of true. Button 4 and 5 are disabled. The buttons are stored in
an array called <code>cells2</code>. All these buttons can  be focused</p>

<table style="background: ButtonFace;" cellspacing="1">
<tr>
    <td class="coolButton" tabIndex="" onaction="alert(event)"><img src="images/movetoicon.gif" align="absmiddle"> Button 0</td>
    <td class="coolButton" tabIndex="1"><img src="images/movetoicon.gif" align="absmiddle"> Button 1</td>
    <td class="coolButton" tabIndex="1"><img src="images/movetoicon.gif" align="absmiddle"> Button 2</td>
    <td class="coolButton" tabIndex="1" onchange="alert('Changed to ' + this.getValue())"><img src="images/movetoicon.gif" align="absmiddle"> Button 3</td>
    <td class="coolButton" tabIndex="1"><img src="images/movetoicon.gif" align="absmiddle"> Button 4</td>
    <td class="coolButton" tabIndex="1"><img src="images/movetoicon.gif" align="absmiddle"> Button 5</td>
</tr>
</table>

<script>

var cells2 = document.getElementsByTagName("TABLE")[2].rows[0].cells;
for (var i = 0; i < cells2.length; i++)
    createButton(cells2[i]);

cells2[2].setToggle(true);

cells2[3].setToggle(true);
cells2[3].setValue(true, true);    // don't trigger onchange

cells2[4].setEnabled(false);

cells2[5].setEnabled(false);
cells2[5].setToggle(true);
cells2[5].setValue(true, true);    // don't trigger onchange

</script>

<p>Below is a table where each cell is a CoolButton with alwaysUp. Button 2,3 and 5 have toggle. Button
3 and 5 start with a value of true. Button 4 and 5 are disabled. The buttons are stored in
an array called <code>cells3</code>. All these buttons can  be focused</p>

<table style="background: ButtonFace;" cellspacing="1">
<tr>
    <td class="coolButton" tabIndex="1" onaction="alert(event)"><img src="images/favicon.gif" align="absmiddle"> Button 0</td>
    <td class="coolButton" tabIndex="1"><img src="images/favicon.gif" align="absmiddle"> Button 1</td>
    <td class="coolButton" tabIndex="1"><img src="images/favicon.gif" align="absmiddle"> Button 2</td>
    <td class="coolButton" tabIndex="1" onchange="alert('Changed to ' + this.getValue())"><img src="images/favicon.gif" align="absmiddle"> Button 3</td>
    <td class="coolButton" tabIndex="1"><img src="images/favicon.gif" align="absmiddle"> Button 4</td>
    <td class="coolButton" tabIndex="1"><img src="images/favicon.gif" align="absmiddle"> Button 5</td>
</tr>
</table>

<script>

var cells3 = document.getElementsByTagName("TABLE")[3].rows[0].cells;
for (var i = 0; i < cells3.length; i++) {
    createButton(cells3[i]);
    cells3[i].setAlwaysUp(true);
}

cells3[2].setToggle(true);

cells3[3].setToggle(true);
cells3[3].setValue(true, true);    // don't trigger onchange

cells3[4].setEnabled(false);

cells3[5].setEnabled(false);
cells3[5].setToggle(true);
cells3[5].setValue(true, true);    // don't trigger onchange

</script>
<p>Below are three buttons that have toggle set to true. These buttons work as
a radio group by managing their values in the onaction event.
<a href="java script:document.location='view-source:'+document.location;void 0;">View source</a>
for more info.</p>

<table style="background: ButtonFace;" cellspacing="1">
<tr>
    <td class="coolButton" tabIndex="1"><img src="images/favicon.gif" align="absmiddle"> Button 0</td>
    <td class="coolButton" tabIndex="1"><img src="images/favicon.gif" align="absmiddle"> Button 1</td>
    <td class="coolButton" tabIndex="1"><img src="images/favicon.gif" align="absmiddle"> Button 2</td>
   
</tr>
</table>

<script>

var cells4 = document.getElementsByTagName("TABLE")[4].rows[0].cells;

function doRadio() {
    // loop over all the buttons in the radio group
    for (var i = 0; i < cells4.length; i++)
        cells4[i].setValue(this == cells4[i]);    // if the clicked button then set value to true
}


for (var i = 0; i < cells4.length; i++) {
    createButton(cells4[i]);
    //cells4[i].setAlwaysUp(true);
    cells4[i].setToggle(true);
    if (i == 0)
        cells4[i].setValue(true);
    cells4[i].onaction = doRadio;
}
</script>
</body>
</html>
  Mvh Thomas //Krydset
Avatar billede hooh Nybegynder
30. juni 2004 - 10:49 #2
jo det har jeg set og som jeg skrev :

Den kode man får den ovennævnte side er meget stor og jeg ønsker ikke alle de funktionaliter som de giver.

Jeg ville helst undgå at få .js filerne
Avatar billede skovenborg Nybegynder
30. juni 2004 - 12:02 #3
du kan jo så prøve en lidt mere forenklet udgave (eller to som der er her afhængigt af om du vil bruge form-knapper eller almindelige billeder):
<script type="text/javascript">
  var billeder = ["bld2.png","bld3.png"]; // De billeder du vil bruge
  var temp_arr= new Array();
  // Preloader billeder
  for (i=0;i<billeder.length;i++) {
      temp_arr[i] = new Image();
      temp_arr[i].src= billeder[i];
  }
  function changeImage(elm,url) {
        elm.style.backgroundImage = "url("+url+");";
  }
</script>

<form>
  <input type="button" value="tekst" style="background-image:url(bld1.png);" onmouseover="changeImage(this,'bld2.png');" onmouseout="changeImage(this,'bld1.png');" onmousedown="changeImage(this,'bld3.png');" onmouseup="changeImage(this,'bld2.png');" />
  <img src="logo.png" src="bld1.png" width="30" height="20" onmouseover="this.src='bld2.png';" onmouseout="this.src='bld1.png';" onmousedown="this.src='bld3.png';" onmouseup="this.src='bld2.png';" />
</form>
Avatar billede -kenner- Nybegynder
30. juni 2004 - 17:30 #4
du kan jo så prøve en lidt mere forenklet udgave (eller to som der er her afhængigt af om du vil bruge form-knapper eller almindelige billeder):
<script type="text/javascript">
  var billeder = ["bld2.png","bld3.png"]; // De billeder du vil bruge
  var temp_arr= new Array();
  // Preloader billeder
  for (i=0;i<billeder.length;i++) {
      temp_arr[i] = new Image();
      temp_arr[i].src= billeder[i];
  }
  function changeImage(elm,url) {
        elm.style.backgroundImage = "url("+url+");";
  }
</script>

<form>
  <input type="button" value="tekst" style="background-image:url(bld1.png);" onmouseover="changeImage(this,'bld2.png');" onmouseout="changeImage(this,'bld1.png');" onmousedown="changeImage(this,'bld3.png');" onmouseup="changeImage(this,'bld2.png');" />
  <img src="logo.png" src="bld1.png" width="30" height="20" onmouseover="this.src='bld2.png';" onmouseout="this.src='bld1.png';" onmousedown="this.src='bld3.png';" onmouseup="this.src='bld2.png';" />
</form>
Avatar billede skovenborg Nybegynder
30. juni 2004 - 17:35 #5
-kenner- >> Lige mine ord - bogstavelig talt ;-)
Avatar billede roenving Novice
30. juni 2004 - 17:47 #6
>> -kenner-

Du skal øjeblikkeligt ophøre med at kopiere andre brugeres indlæg og lægge dem som svar, da jeg vil betragte det som en klar overtrædelse af http://www.eksperten.dk/regler.phtml, §2.1.9 !-)

/coadmin
Avatar billede hooh Nybegynder
01. juli 2004 - 14:47 #7
skovenborg: jeg ville helst undgå at bruge billeder!!
Avatar billede skovenborg Nybegynder
01. juli 2004 - 18:14 #8
okay, det her er måske en lidt mærkelig måde, men håber du forstår den:
<script type="text/javascript">
  var onmouseoutStyle = ["backgroundColor = '#fff'","border = '1px solid #000'","color = '#000'"];
  var onmouseoverStyle = ["backgroundColor = '#f00'","border= '1px solid #00f'","color = '#000'"];
  var onmousedownStyle = ["backgroundColor = '#0f0'","border = '1px solid #ff0'","color = '#000'"];
  var onmouseupStyle = onmouseoverStyle;
  function changeStyle(elm,e) {
        temp_arr = eval("on"+e.type+"Style");
        for (i=0;i<temp_arr.length;i++) {
              a = temp_arr[i].split("=");
              eval("elm.style."+a[0]+" = "+a[1]);
        }
  }
</script>

<div style="background-color:#fff;border:1px solid #000;color:#000;" onmouseover="changeStyle(this,event)" onmouseout="changeStyle(this,event)" onmousedown="changeStyle(this,event)"  onmouseup="changeStyle(this,event)">
  Knap
</div>
Avatar billede skovenborg Nybegynder
01. juli 2004 - 18:20 #9
her skal du stå lave en style for hver event du bruger. Du kan fx også lave en onclick style ved blot at skrive:
var onclickStyle = ....
og så tilføje onclick="changeStyle(this,event);" til din "knap".
Når du definerer stylen skal du dog huske, at du ikke må have bindestreger, som du normalt bruger. Hvis du fx gerne vil definere border-top-color skal, som en generel regel, fjerne bindestregerne og lave bogstavet efter bindestregen om til stort. Dvs. det kommer til at se sådan her ud: borderTopColor. Du skal gøre dette fordi det skal bruges i sammenhæng med almindelig DOM og her må man ikke bruge bindestreger.
Avatar billede roenving Novice
01. juli 2004 - 18:35 #10
En anelse nemmere at overskue (men måske ikke at forstå ?-)

<script type="text/javascript">
  var styles = new Array();
  styles['mouseout'] = {"backgroundColor":"#fff","border":"1px solid #000","color":"#000"};
  styles['mouseover'] = {"backgroundColor":"#f00","border":"1px solid #00f","color":"#000"};
  styles['mousedown'] = {"backgroundColor":"#0f0","border":"1px solid #ff0","color":"#000"};
  styles['mouseup'] = styles['mouseover'];

  function changeStyle(elm,e) {
        for (st in styles[e.type]) {
              elm.style[st] = styles[e.type][st];
        }
  }
</script>
Avatar billede hooh Nybegynder
02. juli 2004 - 11:40 #11
jeg fik det løst selv.

Skovenborg: din løsning laver ikke de rammer som om det var button-pressed.


<HTML>
<HEAD>
<STYLE>
.onmouseOver {
border-top: outset;
border-right: outset;
border-bottom: outset;
border-left: outset;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
}

.pressedDown{
border-top: inset;
border-right: inset;
border-bottom: inset;
border-left: inset;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
}

.normal{
border-top: solid #99CC66;
border-right: solid #99CC66;
border-bottom: solid #99CC66;
border-left: solid #99CC66;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
}

</STYLE>
</HEAD>
<body onselectstart="return false" ondragstart="return false" topmargin="0" leftmargin="0">

<table bgcolor="#99CC66" border=0 cellpadding=2 width=760>
<tr>
  <td class="normal" onmouseover="this.className='onmouseOver'" onmousedown="this.className='pressedDown'" onmouseup="this.className='normal'" onmouseout="this.className='normal'"><font size="1"><b>Menu</strong></td>
  <td class="normal" onmouseover="this.className='onmouseOver'" onmousedown="this.className='pressedDown'" onmouseup="this.className='normal'" onmouseout="this.className='normal'"><font size="1"><b>Menu</strong></td>
  <td class="normal" onmouseover="this.className='onmouseOver'" onmousedown="this.className='pressedDown'" onmouseup="this.className='normal'" onmouseout="this.className='normal'"><font size="1"><b>Menu</strong></td>
</tr>
</table>
Avatar billede hooh Nybegynder
02. juli 2004 - 11:46 #12
man kan selvfølgelig også ændre sin cursor, når man kører over menuen.

.onmouseOver {
border-top: outset;
border-right: outset;
border-bottom: outset;
border-left: outset;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
cursor:hand; <--
}

.pressedDown{
border-top: inset;
border-right: inset;
border-bottom: inset;
border-left: inset;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
cursor:hand;
}
Avatar billede skovenborg Nybegynder
02. juli 2004 - 11:57 #13
nej, men det kunne du stille den til. Mit eksempel var blot et meget enkelt et, og jeg havde ikke lige tænkt på hvordan du præcis ville have den til at se ud ;-)
Avatar billede hooh Nybegynder
02. juli 2004 - 12:05 #14
jeg ønskede den som det det eksempel der er i det link jeg havde givet i mit spørgsmål.

Men hvis jeg får et svar fra dig, så vil jeg gerne give dig halvdelen af pointene.
Avatar billede hooh Nybegynder
02. juli 2004 - 12:07 #15
(uups kom til at trykke på send)

Jeg vidste ikke at der var noget hed hed "inset" i style.
Avatar billede skovenborg Nybegynder
02. juli 2004 - 13:02 #16
stort set det samme som din kunne jo laves på denne her måde:
<script type="text/javascript">
  var styles = new Array();
  styles['mouseout'] = {"border":"1px solid #99CC66"};
  styles['mouseover'] = {"border":"1px outset"};
  styles['mousedown'] = {"border":"1px inset"};
  styles['mouseup'] = styles['mouseover'];

  function changeStyle(elm,e) {
        for (st in styles[e.type]) {
              elm.style[st] = styles[e.type][st];
        }
  }
</script>

</div>
<table bgcolor="#99CC66" border=0 cellpadding=2 width=760>
<tr>
  <td class="normal" onmouseover="changeStyle(this,event)" onmouseout="changeStyle(this,event)" onmousedown="changeStyle(this,event)"  onmouseup="changeStyle(this,event)"><font size="1"><b>Menu</strong></td>
  <td class="normal" onmouseover="changeStyle(this,event)" onmouseout="changeStyle(this,event)" onmousedown="changeStyle(this,event)"  onmouseup="changeStyle(this,event)"><font size="1"><b>Menu</strong></td>
  <td class="normal" onmouseover="changeStyle(this,event)" onmouseout="changeStyle(this,event)" onmousedown="changeStyle(this,event)"  onmouseup="changeStyle(this,event)"><font size="1"><b>Menu</strong></td>
</tr>
</table>

Her går jeg dog ud fra roenvings metode. Farverne er måske ikke helt rigtige, men IE laver går åbenbart ikke ud fra den samme border-farve når du skifter klassen.
Avatar billede skovenborg Nybegynder
02. juli 2004 - 13:12 #17
for mig at se skal der vist stå:
styles['mouseout'] = {"border":"1px solid #99CC66"};
  styles['mouseover'] = {"border":"1px outset #fff"};
  styles['mousedown'] = {"border":"1px inset #fff"};
  styles['mouseup'] = styles['mouseover'];
for at det kommer til at se ud som før. Nåmen her er et svar, som du kan gøre med hvad du vil. :-)
Avatar billede roenving Novice
02. juli 2004 - 14:13 #18
-- og det skal da absolut tilføjes, at det er en rigtig dårlig idé at ændre className on-the-fly ...

-- da browseren så starter med at skulle tegne hele skærmbilledet, som om siden lige var blevet åbnet !-)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 11:24 Hvor kan jeg finde hjælp til at flytte fra min gamle Samsung Flip4 til min nye Samsung Galaxy S24 Af vbr i Apps til Android
I dag 11:16 problem med mailbesked Af Pestilensen i Excel
I dag 10:45 Powerbank Af postpeter@outlook.dk i Fri debat
22/0821:38 webui_forge_cu121_torch231 med AMD Grafikkort. Af jonpet i Andet software
22/0820:06 email adresse Af Malm i Forslag til ændringer
White papers
Flere white papers »