Notifikationer

Markér alle som læst Log ud

mads1987 Nybegynder

15. september 2004 - 18:38 Der er 13 kommentarer og
1 løsning

Billeder i stedet for radio buttons.

Jeg har nu i noget tid forgæves søgt efter en måde hvorpå jeg kan erstatte de almindelige radio buttons i en radio group, med billeder.
Jeg ønsker ganske simpelt bare at "den tomme" radio button bliver erstattet af 1.gif, og "den med prikken" bliver erstattet af billede 2.

Er der nogen der har en løsning?

Synes godt om

elskermad.dk Nybegynder

15. september 2004 - 20:03 #1

skal du kun bruge 2 radioboxes?

Synes godt om

elskermad.dk Nybegynder

15. september 2004 - 20:08 #2

<html>
<head>
<title>radioboxes</title>
<script language='javascript' type='text/javascript'>
var value = 0;
</script>
</head>
<body>

<form name='valg' method='get' action='form.html' onSubmit='this.vaerdi.value=value'>
<a href='#' onClick='value=0;return false'><img src='0.jpg' border='0'></a>
<a href='#' onClick='value=1;return false'><img src='1.jpg' border='0'></a><br>
<br>
<input type='hidden' name='vaerdi'>

<input type='submit' value='ok!'>

</form>

</body>
</html>

så skal du bare lave nogle flere billeder og udskifte værdierne plus navnet på det skjulte felt! håber du kan bruge det :D

Synes godt om

mads1987 Nybegynder

15. september 2004 - 21:30 #3

Jeg mangler bare at få de to billeder til at "skifte billede" når man trykker på dem. Ligesom når man trykker på en radio button, så kommer der en lille prik i midten. Og når man så trykker på en ny radio, så flyttes prikken. Ligeledes er det så et andet billede som skal skifte.

Synes godt om

elskermad.dk Nybegynder

15. september 2004 - 21:33 #4

jeg kan ikke lige huske hvorn man laver en changeimage, men kan lave det på en alternativ-amatør måde!?

Synes godt om

elskermad.dk Nybegynder

15. september 2004 - 21:38 #5

tror det virker, men det er ikke testet!!

<html>
<head>
<title>radioboxes</title>
<script language='javascript' type='text/javascript'>
function showdiv(div) {
if (document.getElementById(div).style.display == 'none') {
document.getElementById(div).style.display = '';
}
else {
document.getElementById(div).style.display = 'none';
}
}

var value = 0;
</script>
</head>
<body>

<form name='valg' method='get' action='form.html' onSubmit='this.vaerdi.value=value'>
<a href='#' onClick='value=0;showdiv("0_0");showdiv("0_1");return false'>
<span id='0_0' style='display:'><img src='0.jpg' border='0'></span>
<span id='0_1' style='display:none'><img src='1.jpg' border='0'></span>
</a>
<a href='#' onClick='value=1;showdiv("1_0");showdiv("1_1");return false'>
<span id='1_0' style='display:none'><img src='0.jpg' border='0'></span>
<span id='1_1' style='display:'><img src='1.jpg' border='0'></span>
</a><br>
<br>
<input type='hidden' name='vaerdi'>

<input type='submit' value='ok!'>

</form>

</body>
</html>

Synes godt om

mads1987 Nybegynder

15. september 2004 - 21:46 #6

De opfører sig stadig ikke som rigtige radio buttons, man tænder og slukker bare for hvert billede. Synes også det er en vældig avanceret måde :)

Synes godt om

elskermad.dk Nybegynder

15. september 2004 - 21:49 #7

hehe ja, der er sikkert os nogen der kan lave det med 2 linier lige inden ved siden af i spm 4324242 :D

Synes godt om

mads1987 Nybegynder

15. september 2004 - 22:00 #8

Normalt ville jeg være godt tilfreds så længe det virkede, men det skal senere blive dynamsik med hensyn til antal af radio groups, og det bliver svært med det viste eksempel?

Synes godt om

htm Nybegynder

15. september 2004 - 22:33 #9

Prøv og tjek denne: http://www.dansteinman.com/dynduo/en/radio.html

Synes godt om

mads1987 Nybegynder

16. september 2004 - 10:06 #10

Den faldt jeg også over, da jeg søgte her på exp. Kan en evt. hjælpe mig med en "prøve" det er ikke muligt for mig at downloade soursekoden på siden.

Synes godt om

htm Nybegynder

16. september 2004 - 22:23 #11

Jeg har lige sat en kort demo op: http://munchi.dk/exp/540080/radiobuttons.html bygget på det eks.

Alt kildekoden står i samme fil.

Synes godt om

mads1987 Nybegynder

17. september 2004 - 08:53 #12

Jeg siger mange tak, du må meget gerne svare htm.

Synes godt om

mads1987 Nybegynder

17. september 2004 - 08:54 #13

Smider lige koden her, hvis htm's side engang ikke skulle eksistere mere:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da">
<head>
<title>Image Radioboxes</title>
<script type="text/javascript">

function preload(imgObj,imgSrc)
{
if (document.images)
{
eval(imgObj+' = new Image()');
eval(imgObj+'.src = "'+imgSrc+'"');
}
}

function changeImage(layer,imgName,imgObj)
{
if (document.images)
{
if (document.layers && layer!=null) eval('document.'+layer+'.document.images["'+imgName+'"].src = '+imgObj+'.src');
else document.images[imgName].src = eval(imgObj+".src");
}
}

function Radio(layer,imgNames,length,defaultValue)
{
this.layer = layer;
this.imgNames = imgNames;
this.length = length;
this.change = RadioChange;
this.value = (defaultValue)? defaultValue : "undefined";
}

function RadioChange(index,value)
{
this.value = value;
for (var i=0; i<this.length; i++)
changeImage(this.layer,this.imgNames+i,'radio0');
changeImage(this.layer,this.imgNames+index,'radio1');
}

function init()
{
computers = new Radio('surveyDiv','computersImg',4,'two');
}

preload('button0','button-submit0.gif');
preload('button1','images/button-submit1.gif');
preload('radio0','radio0.gif');
preload('radio1','radio1.gif');

function submitForm()
{
str = "You have " + computers.value + " computers in your household";
alert(str);
}

</script>
<style type="text/css">

</style>
</head>
<body bgcolor="#ffffff" onLoad="init()">

<div id="surveyDiv">

<p>Number of computers in your household:
<br><a href="java script:computers.change(0,'one')"><img name="computersImg0" src="radio0.gif" width=10 height=10 border="0"> one
<br><a href="java script:computers.change(1,'two')"><img name="computersImg1" src="radio1.gif" width=10 height=10 border="0"> two
<br><a href="java script:computers.change(2,'three')"><img name="computersImg2" src="radio0.gif" width=10 height=10 border="0"> three
<br><a href="java script:computers.change(3,'four')"><img name="computersImg3" src="radio0.gif" width=10 height=10 border="0"> four

<p><a href="java script:submitForm()"
onMouseDown="changeImage('surveyDiv','submitImg','button1')"
onMouseUp="changeImage('surveyDiv','submitImg','button0')"
onMouseOut="changeImage('surveyDiv','submitImg','button0')">
<img name="submitImg" src="button-submit0.gif" width=68 height=20 ALT="Submit" border=0></a>
</div>

</body>
</html>

Synes godt om

htm Nybegynder

17. september 2004 - 09:01 #14

ok :)

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

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.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS