[HTML] html button als "linkplaatje" gebruiken - Softwareontwikkeling

zondag 23 december 2007 17:02

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Voor een bepaalde toepassing wil ik iets dat sommigen wellicht een beetje tegennatuurlijk zullen vinden, maar in mijn geval is het dus wel wenselijk.

Ik wil graag een html-button als linkplaatje gebruiken. Hiermee bedoel ik dat ik bij het klikken op de button een nieuw browser scherm wil openen middels een standaard <a href tag. Ik wil dus niet via javascript met een onclick event op de button het nieuwe scherm openen, maar echt via de href. Verder wil ik graag dat gebruiker het welbekende "handje met de aanwijzende vinger" ziet als deze de muis op de knop heeft staan.

Tot zover wat ik wil, nu hoe ik het voor elkaar dacht te krijgen (wat dus niet lukt):

code:

1	<a href='http://www.pagina.nl' target='_blank'><input type='button' value='Test' style='background-color:#ff8c25;font-size:12px;color:#FFFFFF;font-weight:bold; width:102px;' /></a>

Dit werkt echter niet, er verschijnt geen handje bij het hoveren over de button en tevens gebeurt er niets als er op geklikt wordt. Is wat ik wil op een andere manier wel mogelijk? En zo ja, hoor ik uiteraard heel graag hoe:P

Een mogelijk simpele oplossing zou natuurlijk zijn om eerst een plaatje te maken van de button als ie op het scherm staat en vervolgens dit plaatje als linkplaatje te gebruiken, maar dit gaat in mijn geval niet. In mijn toepassing is de kleur van de button namelijk volledig instelbaar (alle kleuren kunnen worden gekozen) dus het is ondoenlijk om voor elke mogelijke kleurtint zo'n plaatje te maken (of het zou automatisch moeten kunnen maar die mogelijkheid zie ik ook niet).

thanks!!

zondag 23 december 2007 17:05

Acties:

0 Henk 'm!

osorkon!

Een mogelijke oplossing:

code:

1	<input type="button" value="Test" onclick="window.location = 'www.iets.be' " />

zondag 23 december 2007 17:14

Acties:

0 Henk 'm!

Borizz

Waarom gebruik je niet gewoon de A tag en style je die met CSS, zodat de link eruitziet als een button. Dat is volgens mij een prima oplossing. Zo hoef je ook geen javascript te gebruiken.

[ Voor 12% gewijzigd door Borizz op 23-12-2007 17:15 ]

If I can't fix it, it ain't broken.

zondag 23 december 2007 17:18

Acties:

0 Henk 'm!

Verwijderd

osorkon! schreef op zondag 23 december 2007 @ 17:05:
Een mogelijke oplossing:
code:
1
<input type="button" value="Test" onclick="window.location = 'www.iets.be' "  />

flbos wil geen onclick

.

Verwijderd schreef op zondag 23 december 2007 @ 17:02:
Een mogelijk simpele oplossing zou natuurlijk zijn om eerst een plaatje te maken van de button als ie op het scherm staat en vervolgens dit plaatje als linkplaatje te gebruiken, maar dit gaat in mijn geval niet. In mijn toepassing is de kleur van de button namelijk volledig instelbaar (alle kleuren kunnen worden gekozen) dus het is ondoenlijk om voor elke mogelijke kleurtint zo'n plaatje te maken (of het zou automatisch moeten kunnen maar die mogelijkheid zie ik ook niet).

Dit kan wel met de GDlibrary in PHP

.

zondag 23 december 2007 17:32

Acties:

0 Henk 'm!

Tomfish

En wat is hier mis mee dan:

code:

1	<a href="pagina.html" target="_blank"><img src="plaatje.jpg"></a>

zondag 23 december 2007 17:38

Acties:

0 Henk 'm!

Verwijderd

Xtresis schreef op zondag 23 december 2007 @ 17:32:
En wat is hier mis mee dan:
code:
1
<a href="pagina.html" target="_blank"><img src="plaatje.jpg"></a>

Dat kan dus inderdaad (zoals ik hierboven al schreef), maar dan moet flbos dus wel via bijvoorbeeld PHP die plaatjes laten maken.

maandag 24 december 2007 01:07

Acties:

0 Henk 'm!

Groeselt

Gewoon opmaken met behulp van een div en wat css

Ik heb een voorbeeldje gemaakt. ik heb ook nog de input button erbij gezet dan zie je dat het veel op elkaar lijkt! in IE tenminste FF is ander verhaal maar misschien ben je hiermee op weg geholpen

<head>
<style type="text/css">
.knop {
background:#ff8c25;

border:2px;
border:outset;

font-size:12px;
font-color:#FFFFFF;
text-decoration:none;
text-align:center;

width:98px;
}

</style>
</head>

<body>

<a href="http://www.tweakers.net">
<div class="knop">
<b>Test</b>
</div>
</a>

<input type='button' value='Test' style='background-color:#ff8c25;font-size:12px;color:#FFFFFF;font-weight:bold; width:102px;' />

</body>

[ Voor 16% gewijzigd door Groeselt op 24-12-2007 01:12 ]

maandag 24 december 2007 01:43

Acties:

0 Henk 'm!

Geert.H

@groeselt, wat je nu net fabriceert is, uhm, een beetje ranzig

Je zet een anchor om een div heen, dat is iets wat niet hoort (valid enzo). Het zou ook gewoon prima zo kunnen:

code:

<html>
    <head>
        <style type="text/css">
        .knop {
            background:#ff8c25;
            border:2px solid #777;
            border-left:1px;
            border-top:2px solid #fff;
            padding:1px;
            font-size:12px;
            font-color:#fff;
            font-weight:bold;
            text-decoration:none;
            text-align:center;
            width:98px;
            display:block;
            font-family:verdana, arial, sans-serif;
            color:#fff;
            font-size:0.7em;
        }
        </style>
    </head>

    <body>
        <a href="http://www.tweakers.net" class="knop">Test</a>
        <input type='button' value='Test' style='background-color:#ff8c25;font-size:12px;color:#FFFFFF;font-weight:bold; width:102px;' />
    </body>
</html>

Verder is het ook not-done om <b> te gebruiken e.d. Het idee van CSS is namelijk om opmaak en content van elkaar te scheiden. Op deze manier doe je dat niet. Daarom dus de <b> tags weg en in de css font-weight:bold neer gezet.

@ts, je hebt voor je probleem helemaal geen input nodig. Je kunt simpelweg je anchor zo stylen dat het eruit ziet als een button (ik zie nergens dat je plaatjes gebruikt, dus dat lijkt me dan ook niet nodig). En als je dat niet wilt kan je prima de onclick oplossing gebruiken, die opent bij mijn weten niet in een nieuw scherm

Met css kan je trouwens ook de muis veranderen, dat doe je met: cursor:pointer

edit:
HTML+css verder aangepast zodat de anchor nu écht lijkt op een button

[ Voor 49% gewijzigd door Geert.H op 24-12-2007 09:34 ]

maandag 24 december 2007 17:14

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

bedankt voor het grote aantal reacties! Dat je met CSS zo'n knop als het ware ook gewoon kan nabouwen, daar was ik nog niet opgekomen:P Op basis van de voorbeelden die al gegeven werden slaag ik hier prima in en het werkt nu dan ook perfect:D

thanks!!

maandag 24 december 2007 18:51

Acties:

0 Henk 'm!

BalusC

Carpe diem

HTML:

1
2
3

<form action="http://tweakers.net" target="_blank">
    <input type="submit">
</form>

werkt ook net zo prima.

Het ligt er maar net aan hoe je het wilt hebben wanneer CSS is uitgeschakeld. Een knop of een link.

[ Voor 29% gewijzigd door BalusC op 24-12-2007 18:53 ]

dinsdag 25 december 2007 20:11

Acties:

0 Henk 'm!

Mei

Het target-attribuut is deprecated. Gebruik dan unobtrusive Javascript om de link in een nieuw venster te openen (alhoewel dat een beetje heel erg not-done is qua usability anno 2007):

HTML:

1	<a href="http://gathering.tweakers.net/" id="link">GoT</a>

JavaScript:

function openWindow()
{
/**
* De url die hij moet openen is op te halen met this.href. This verwijst
* namelijk naar het element waarop geklikt is, in jouw geval de anchor.
* We gebruiken this.id als naam voor het nieuwe venster
*/

window.open(this.href, this.id [, extra_opties]);
}
var link=document.getElementByid('link');
link.onclick=openWindow;

In de Mozilla Developers reference staat nog meer informatie over het openen van nieuwe windows en usability. Ik raad het persoonlijk ook erg af voor het gebruik op websites, tenzij je misschien aan een applicatie bezig bent. Voor normale sites is het gewoon not-done.