i want to change this coords to menu

how to change these Script from coords mode to a menu mode
due the coords mode is not working with px view and the site pages wont view in % mode
thank you

Code:

    <div class="MjanyFolatRight Color">
      <map id="Color" name="Color">
        <area alt="" coords="126, 18, 142, 35" href="javascript:chooseStyle('BdCo1',60)" shape="rect" target="_self" title="الأحمر" />
        <area alt="" coords="105, 19, 123, 35" href="javascript:chooseStyle('BdCo2',60)" shape="rect" target="_self" title="الأزرق" />
        <area alt="" coords="87, 19, 103, 35" href="javascript:chooseStyle('BdCo3',60)" shape="rect" target="_self" title="الموف" />
        <area alt="" coords="68, 19, 85, 36" href="javascript:chooseStyle('BdCo4',60)" shape="rect" target="_self" title="الفيروزي" />
        <area alt="" coords="47, 19, 65, 34" href="javascript:chooseStyle('BdCo5',60)" shape="rect" target="_self" title="الأخضر" />
        <area alt="" coords="26, 19, 50, 35" href="javascript:chooseStyle('BdCo6',60)" shape="rect" target="_self" title="البرتقالي" />
      </map>
      <img alt="" class="Color" src="vx_soft/Co1/img/spacer.gif" usemap="#Color" /></div>
<link rel="stylesheet" type="text/css" href="http://micsoft.ga/vx_soft/Co2/Css.css" />
<link href="vx_soft/Co1/Css.css" media="screen" rel="alternate stylesheet" type="text/css" title="BdCo1" />
<link href="vx_soft/Co3/Css.css" media="screen" rel="alternate stylesheet" type="text/css" title="BdCo3" />
<link href="vx_soft/Co4/Css.css" media="screen" rel="alternate stylesheet" type="text/css" title="BdCo4" />
<link href="vx_soft/Co5/Css.css" media="screen" rel="alternate stylesheet" type="text/css" title="BdCo5" />
<link href="vx_soft/Co6/Css.css" media="screen" rel="alternate stylesheet" type="text/css" title="BdCo6" />

the needed Script better be a HTML not Java

What exactly does this code do?

that is a theme changer
its like fast changer by just push

i think i got the main part
the links are

Code:

javascript:chooseStyle('BdCo1',60)" shape="rect" target="_self" title="البرتقالي" />
javascript:chooseStyle('BdCo2',60)" shape="rect" target="_self" title="البرتقالي" />
javascript:chooseStyle('BdCo3',60)" shape="rect" target="_self" title="البرتقالي" />
javascript:chooseStyle('BdCo4',60)" shape="rect" target="_self" title="البرتقالي" />
javascript:chooseStyle('BdCo5',60)" shape="rect" target="_self" title="البرتقالي" />
javascript:chooseStyle('BdCo6',60)" shape="rect" target="_self" title="البرتقالي" />

can these links being in a HTM menu that dose not change the page but do its job to get CSS links as it should be in defaults

Have you tried the tutorial in the tips & tricks section?

Part me but i have no idea about the tutorial you are talking about
do you mind showing it to me
and thanks

This is the one : https://help.forumotion.com/t135248-add-a-theme-picker

It's a bit dated, but it should still do the trick.


As for the map, you could try turning the contents into a link. That is, convert this :

Code:

<area alt="" coords="105, 19, 123, 35" href="javascript:chooseStyle('BdCo2',60)" shape="rect" target="_self" title="الأزرق" />

into an <a> tag :

Code:

<a href="javascript:chooseStyle('BdCo2',60);">الأزرق</a>

I didn't test the code you posted, but I'm pretty sure it'll give you the same effect if you convert the <area> elements into an <a> tag, and then put the javascript statement in the href attribute. You'll want to turn <map> into a <div> or something, though.

can this <a thing used for a drop menu or something like that
a menu also with images
like icons drop menu to pick from if possible
thanks

Well, for a dropdown menu you'd usually use the <select> element.

Something like this for example :

Code:

<select id="select_box">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

Then some JavaScript to execute when the value is changed :

Code:

$(function() {
  document.getElementById('select_box').onchange = function() {
    switch (this.value) {
      case '1' :
        chooseStyle('BdCo1',60);
        break;

      case '2' :
        chooseStyle('BdCo2',60);
        break;

      case '3' :
        chooseStyle('BdCo3',60);
        break;

      default :
        'Code to execute by default';
        break;
    }
  };
});

You see the number for each case corresponds to the value of each <option> element. Here's a small tuto on the switch statement if you're interested : http://www.w3schools.com/js/js_switch.asp

im a man who learn by Exaimpls not by reading things
live Exaimpls
i went in trouple in the JavaScript cos i was needing to add it in HTML way but
<script> and </script> did the job right
topic is solved
i have one last qeustion answer it and archive the tope
is that possible to use
image instead of a text in the

Code:

  <option value="1">Option 1</option>

let me know by only yes or no
and sorry for bothering
thanks again
really thanks

No, unfortunately you cannot use <img> tags inside an <option> element. It's possible to put them there, however, it'll just display as blank texte.

no problem i understand
thanks a lot
really thanks for the big help

You're welcome ^^

Topic archived

Have a good day.