[js] button actie over laten nemen door plaatje

[Verwijderd]

Ik heb het volgende stukje html code:

code:

<INPUT TYPE="hidden" NAME="ttfEind" VALUE="</font>">
<INPUT TYPE="button" VALUE="Lettertype eind"
     ONCLICK="insertAtCaret (this.form.bericht,
this.form.ttfEind.value);">

Ik wil dus af van die lelijke button en dit door een plaatje laten doen. Hoe kan ik dit doen? Een link over het plaatje gooien en de link een onclick geven?

[Pelle]

Op woensdag 02 januari 2002 14:20 schreef robbinh het volgende:
Een link over het plaatje gooien en de link een onclick geven?

Bijvoorbeeld. Probeer het eerst eens, en werkt het niet kom dan nog maar es terug.

Nog een hint: <input type="image">

[Verwijderd]

Op woensdag 02 januari 2002 14:22 schreef Pelle het volgende:

[..]

Bijvoorbeeld. Probeer het eerst eens, en werkt het niet kom dan nog maar es terug.

Nog een hint: <input type="image">

Ok, danke, ik zal het eens proberen.
Ik ben geen HTML master, er zijn niet voor niets progs als Dreamweaver.

[Verwijderd]

Op woensdag 02 januari 2002 14:22 schreef Pelle het volgende:
<input type="image">

Met welke parameter geef ik dan aan waar het plaatje zich bevindt?

[Verwijderd]

[img]"plaatje.gif"[/img]

Klaar

[Verwijderd]

onclicks konden toch alleen op links en buttons?
Maar ik zal het proberen.
Danke.

[Pelle]

Op woensdag 02 januari 2002 15:10 schreef robbinh het volgende:
Met welke parameter geef ik dan aan waar het plaatje zich bevindt?

* Zucht *

src="locatie" misschien?
Ga hier anders es een middagje rondloeren. Is veel van te leren: http://html.op-het.net

onClick trouwens niet in image-tag zetten maar in een <a> eromheen.

[Dennis]

Gebruik svp Homesite ( www.macromedia.com/software/homesite/ ), die geeft hints welke properties je bij welke tags kunt gebruiken...

[Verwijderd]

thnx, ik ga html nog een keer begrijpen

[Hangloozz]

Op woensdag 02 januari 2002 15:20 schreef Pelle het volgende:

onClick trouwens niet in image-tag zetten maar in een <a> eromheen.

yep, want was het niet zo dat NN onclicks in de image-tag niet ondersteund?

Op woensdag 02 januari 2002 15:17 schreef robbinh het volgende:
onclicks konden toch alleen op links en buttons?

zulke dingen roepen terwijl je zelf al aan geeft niet al te veel van HTML te weten is levensgevaarlijk
Je kunt er vanuit gaan dat zo'n beetje elke object een event kan bevatten. (event=onmouseover, onclick, onReadyStateChange,...)
Dus: eerst doen, dan vragen.

[Pelle]

Op woensdag 02 januari 2002 15:27 schreef Hangloozz het volgende:
yep, want was het niet zo dat NN onclicks in de image-tag niet ondersteund?

Indeed. Uw score voor 2002: goed 1, fout 0

[Verwijderd]

maar als ik doe:

code:

<input type="image" src="b.gif">

en je klikt er op dan post ie gelijk het formulier, wat dus niet de bedoeling is.
Als ik:

code:

<INPUT TYPE="hidden" NAME="bBegin" VALUE="<b>">
<a href="#" ONCLICK="insertAtCaret (this.form.bericht, 
this.form.bBegin.value);">[img]"/contxt/images/b.gif"></a[/img]

doe dan geeft IE een error.
Was dan het probleem?

[Thijsmans]

die <a href> is geen form-atribuut, misschien dat dat er wat mee te maken heeft? probeer anders this te vervangen voor document.

[Verwijderd]

Op woensdag 02 januari 2002 16:04 schreef Prammenhanger het volgende:
die <a href> is geen form-atribuut, misschien dat dat er wat mee te maken heeft? probeer anders this te vervangen voor document.

Dan geeft ie nog steeds een fout

[Verwijderd]

Ach NS

Als je het dan netjes doet;

code:

<a href="javascript:void(0)" onClick="DoeIets()">[img]"plaatje.gif"><a/[/img]

[Pelle]

Op woensdag 02 januari 2002 16:33 schreef robbinh het volgende:
Dan geeft ie nog steeds een fout

Omdat je dan ook de formnaam mee moet geven.

code:

document.forms['formNaam'].elements['ttfEind']

En heeft je form geen naam, dan kan het zo:

code:

document.forms[0].elements['ttfEind']

[Verwijderd]

Ok, danke, nou werkt dat, maar nu doet hetvolgende het niet:

code:

<INPUT TYPE="hidden" NAME="bBegin" VALUE="<b>">
<a href="javascript:void(0)" onClick="insertAtCaret (this.form.bericht, 
this.form.bBegin.value);">[img]"/contxt/images/b.gif"></a[/img]

Geeft ie de error:

code:

this.form.bericht is leeg of geen object

Voor de duidelijkheid, bericht is een textarea.

[Hangloozz]

misschien ff veranderen in:

code:

this.form.bericht.value

[Verwijderd]

Ik heb nu:

code:

<INPUT TYPE="hidden" NAME="bBegin" VALUE="<b>">
<a href="javascript:void(0)" onClick="insertAtCaret (document.forms[0].bericht, 
document.forms[0].elements['bBegin'].value);">[img]"/contxt/images/b.gif"></a[/img]

maar hij geeft de waarde niet door, want hij geet nu de error dat de variabele curRange(die wordt aangeroepen met de onClick) leeg is.

[Hangloozz]

* Hangloozz sucht*

misschien moest je die hele functie dan ook maar eens posten..

[Verwijderd]

Ok dan, maar ik d8 dat het gewoon aan dat onclick gebeuren lag. Daarvoor werkte ie wel namelijk.

code:

<SCRIPT>
function setCaretToStart (el) {
  if (el.createTextRange) {
    var v = el.value;
    var r = el.createTextRange();
    r.moveEnd('character', -v.length);
    r.select();
  }
}
function setCaretToEnd (el) {
  if (el.createTextRange) {
    var v = el.value;
    var r = el.createTextRange();
    r.moveStart('character', v.length);
    r.select();
  }
}
function insertAtEnd (el, txt) {
  el.value += txt;
  setCaretToEnd (el);
}
function insertAtStart (el, txt) {
  el.value = txt + el.value;
  setCaretToStart (el);
}
function insertOnClick (el, txt) {
  var r = document.selection.createRange();
  r.text = txt;
}
function insertTag (el, sel) {
  var v = sel.options[sel.selectedIndex].value;
  insertOnClick(el, v);
}
function insertAtCaret (el, txt) {
  if (el.currRange) {
    el.currRange.text =
el.currRange.text.charAt(el.currRange.text.length - 1) != ' ' ? txt :
txt + ' ';
    el.currRange.select();
  }
  else
    insertAtEnd(el, txt);
}
function storeCaret (editEl) {
  if (editEl.createTextRange)
    editEl.currRange = document.selection.createRange().duplicate();
}
</SCRIPT>
<INPUT TYPE="hidden" NAME="bEind" VALUE="</b>">
<a href="javascript:void(0)" onClick="insertAtCaret (this.form.bericht,this.form.bBegin.value);">[img]"b.gif"></a[/img]

Alsjeblieft en alvast dankjewel als je de fout ziet

[Verwijderd]

<input type="image" src="jelocatie.jpg" value="submit">

[Pelle]

Op woensdag 02 januari 2002 19:29 schreef jurriebur het volgende:

<input type="image" src="jelocatie.jpg" value="submit">

Topic lezen is ook een kunst. Hij wil niet submitten, maar een functie uitvoeren.

[Hangloozz]

mja, da's een lekker lappie code...

wat ik me als eerste afvraag:
bestaat het textarea wel?

zoja, dan zou ik zowiezo even zorgen dat al die inputs(txtarea's en gewone textvelden) tussen form-tags staat en daarna de functie met de juiste formverwijzing aanroepen:

code:

<form>
<INPUT TYPE="hidden" NAME="bBegin" VALUE="<b>">
<textarea cols="10" rows="3" name="bericht"></textarea>
<INPUT TYPE="hidden" NAME="bEind" VALUE="</b>">
...
...
...
enz.
</form>

en in de functie verwijs je dan naar het juiste form:

code:

<a href="javascript:void(0)" onClick="insertAtCaret(document.forms[0].bericht.value,document.forms[0].bBegin.value);">[img]"b.gif"></a[/img]

enne sorry dat ik het zeg maar is al deze shit niet iets te hoog gegrepen voor je?
ik bedoel; niet of nauwelijks verstand van javascript en dan al een forum willen bouwen...

[Verwijderd]

Ik wil geen forum bouwen
Ik heb een content management systeem in PHP geschreven maar ik wil dat de gebruikers de pagina's gemakkelijk kunnen opmaken. Ik had hiervoor dus dit script maar dan met buttons, maar om het wat duidelijker/vrolijker te maken wou ik dus die buttons vervangen door plaatjes.
Ik zal maar even heel de HTML code geven met de 'button-opmaak':

code:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF" text="#000000">
<div align="center"> <font face="Arial" size="2">
<form action="content.php3?pagina=$pagina" method="post">
Login naam:<br>
<input type="text" name="login"><br>
Wachtwoord:<br>
<input type="password" name="pass"><br>
<input type="hidden" name="action" value="nieuw">
<input type="submit" value="Ok">
</form>
<SCRIPT>
function setCaretToStart (el) {
  if (el.createTextRange) {
    var v = el.value;
    var r = el.createTextRange();
    r.moveEnd('character', -v.length);
    r.select();
  }
}
function setCaretToEnd (el) {
  if (el.createTextRange) {
    var v = el.value;
    var r = el.createTextRange();
    r.moveStart('character', v.length);
    r.select();
  }
}
function insertAtEnd (el, txt) {
  el.value += txt;
  setCaretToEnd (el);
}
function insertAtStart (el, txt) {
  el.value = txt + el.value;
  setCaretToStart (el);
}
function insertOnClick (el, txt) {
  var r = document.selection.createRange();
  r.text = txt;
}
function insertTag (el, sel) {
  var v = sel.options[sel.selectedIndex].value;
  insertOnClick(el, v);
}
function insertAtCaret (el, txt) {
  if (el.currRange) {
    el.currRange.text =
el.currRange.text.charAt(el.currRange.text.length - 1) != ' ' ? txt :
txt + ' ';
    el.currRange.select();
  }
  else
    insertAtEnd(el, txt);
}
function storeCaret (editEl) {
  if (editEl.createTextRange)
    editEl.currRange = document.selection.createRange().duplicate();
}
</SCRIPT>
<div align="center">
<INPUT TYPE="hidden" NAME="bEind" VALUE="</b>">
<INPUT TYPE="button" VALUE="Vet begin"
     ONCLICK="insertAtCaret (this.form.bericht,
this.form.bBegin.value);"
>    
<INPUT TYPE="hidden" NAME="bEind" VALUE="</b>">
<INPUT TYPE="button" VALUE="Vet eind"
     ONCLICK="insertAtCaret (this.form.bericht,
this.form.bEind.value);"
>
<INPUT TYPE="hidden" NAME="iBegin" VALUE="<i>">
<INPUT TYPE="button" VALUE="Schuin begin"
     ONCLICK="insertAtCaret (this.form.bericht,
this.form.iBegin.value);"
>
<INPUT TYPE="hidden" NAME="iEind" VALUE="</i>">
<INPUT TYPE="button" VALUE="Schuin eind"
     ONCLICK="insertAtCaret (this.form.bericht,
this.form.iEind.value);"
>
<INPUT TYPE="hidden" NAME="inspringBegin" VALUE="<blockquote>">
<INPUT TYPE="button" VALUE="Inspring begin"
     ONCLICK="insertAtCaret (this.form.bericht,
this.form.inspringBegin.value);"
>
<INPUT TYPE="hidden" NAME="inspringEind" VALUE="</blockquote>">
<INPUT TYPE="button" VALUE="Inspring eind"
     ONCLICK="insertAtCaret (this.form.bericht,
this.form.inspringEind.value);"
>
<br>
<select name="ttfBegin">
    <option value="&lt;font face='Times New Roman'&gt;">Times New Roman</option>
    <option value="&lt;font face='Courier'&gt;">Courier</option>
    <option value="&lt;font face='Arial'&gt;">Arial</option>
    <option value="&lt;font face='Verdana'&gt;">Verdana</option>
  </select>
<INPUT TYPE="button" VALUE="Lettertype begin"
     ONCLICK="insertAtCaret (this.form.bericht,
this.form.ttfBegin.value);"
>
<INPUT TYPE="hidden" NAME="ttfEind" VALUE="</font>">
<INPUT TYPE="button" VALUE="Lettertype eind"
     ONCLICK="insertAtCaret (this.form.bericht,
this.form.ttfEind.value);"
>
<select name="centratieBegin">
    <option value="&lt;div align='left'&gt;">Links</option>
    <option value="&lt;div align='center'&gt;">Midden</option>
    <option value="&lt;div align='right'&gt;">Rechts</option>
  </select>
<INPUT TYPE="button" VALUE="Centratie begin"
     ONCLICK="insertAtCaret (this.form.bericht,
this.form.centratieBegin.value);"
>
<INPUT TYPE="hidden" NAME="centratieEind" VALUE="</div>">
<INPUT TYPE="button" VALUE="Centratie eind"
     ONCLICK="insertAtCaret (this.form.bericht,
this.form.centratieEind.value);"
>
<BR><br>

<TEXTAREA NAME="inhoud" ROWS="20" COLS="60" WRAP="off"
        ONSELECT="storeCaret(this);"
        ONCLICK="storeCaret(this);"
        ONKEYUP="storeCaret(this);">
</TEXTAREA><br>
<input type="hidden" name="action" value="vernieuw">
<input type="hidden" name="pass" value="$pass">
<input type=hidden" name="login" value="$login">
<input type="submit" value="Verander tekst">
<input type="reset" value="Overnieuw">
</form>
</font></div>
</body>
</html>

Zoals je ziet staan de buttons dus wel in een form,
let FF niet op dat w8woord ed ik heb per ongeluk de verkeerde form header uit het PHP script gehaald.

[Verwijderd]

/me Kikt dit topic

Maar als ik dus die buttons vervang door een plaatje/link met het stukje javascript doet ie het niet terwijl het precies hetzelfde is, dus aan het javascriptje kan het niet liggen, toch?