Avatar billede w126 Juniormester
30. april 2015 - 20:05 Der er 16 kommentarer og
1 løsning

select box

Hej ku godt bruge lidt hjælp :)
på min side har jeg en drop Down liste mit spørgsmål er.
kan man lave den så man får vist et billede for hver tekst i boksen.
MVH
w126
Avatar billede claes57 Ekspert
30. april 2015 - 21:33 #1
ja - i hvert fald hvis billedet bare skal være i et felt ved siden af. javascript kald onchange til at aflæse værdi, og vise billede ud fra det.
Avatar billede w126 Juniormester
30. april 2015 - 22:17 #2
Hej claes57
der skal kun komme billede frem når musemarkør er over tekst.


<select onchange="transfer()/transfer1();" id="selected" name="selected" >
<option value="/" selected>Vælg</option>
    <option value="0">Herregaardssten/Grå</option>
    <option value="1">Herregaardssten/GråMix</option>
    <option value="2">Herregaardssten/Sort</option>
    <option value="3">Holmegaardssten/Grå</option>
    <option value="4">Holmegaardssten/Gråmix</option>
    <option value="5">Holmegaardssten/sort</option>
    <option value="6">Fliser Grå 30x30x6</option>
    <option value="7">Fliser Grå 30x60x6</option>
    <option value="8">Fliser Grå 20x40x6</option>
    <option value="9">Fliser Grå 40x40x6</option>
    <option value="10">Fliser Grå 40x40x6</option>
    <option value="11">sf-sten</option>
    <option value="12">Chaussesten</option>
    <option value="13">Brosten</option>
</select>
Avatar billede claes57 Ekspert
01. maj 2015 - 11:23 #3
se fx https://linkpeek.com/blog/display-image-on-hover-using-html-javascript-and-css.html
og det skal ind på de enkelte linjer, fx
<option value="0"><a onmouseover="document.getElementById('place-holder-1').src='billede0.jpg';"
  onmouseout="document.getElementById('place-holder-1').src='linkpeek-transparent-pixel-placeholder.png';">Herregaardssten/Grå</a></option>
selve billedets placering (place-holder) skal du placere udenfor select - bare så billeder kommer et fast sted for ikke at genere kunderne.

Jeg har ikke testet det selv.
Avatar billede w126 Juniormester
01. maj 2015 - 13:49 #4
jeg har det her men kan ikke få det til at virke..
 

<SCRIPT language="JavaScript">
<!--
  if (document.images)
  {
    image_off= new Image(100,100);
    image_off.src="scare.jpg"; 

    image2= new Image(100,100);
    image2.src="img/thumb1.jpg";
    image3= new Image(100,100);
    image3.src="story2.gif"; 
    image4= new Image(100,100);
    image4.src="img/thumb2.jpg"; 
    image5= new Image(100,100);
    image5.src="story4.gif"; 
  }

function change1(picName,imgName)
{
  if (document.images)
    {
      imgOn=eval(imgName + ".src");
      document[picName].src= imgOn;
    }
}
//-->
</SCRIPT>


<!-- end add by me -->
</head>
<body> 
    <div class="container">
  <hr>
    <div class="row">
    <div class="span8">
<table border=0 cellpadding=15><tr><td>
<pre>
<code allow="none">
<div class="fake_select">
<input type="hidden" name="select" value="" id="select" />
<select>
  <option><a name="fake_select" id="fake_select_opt1" onMouseover="change1('pic1','image2')" onclick="set_fake_select(red); return false;"></a></option>
  <option><a name="fake_select" id="fake_select_opt2" onMouseover="change1('pic1','image3')" onclick="set_fake_select(blue); return false;">blue</a></option>
  <option><a name="fake_select" id="fake_select_opt3" onMouseover="change1('pic1','image4')" onclick="set_fake_select(yellow); return false;">Yellow</a></option>
  <option><a name="fake_select" id="fake_select_opt4" onMouseover="change1('pic1','image2')" onclick="set_fake_select(x); return false;">Yellow</a></option>
  <option><a name="fake_select" id="fake_select_opt5" onMouseover="change1('pic1','image3')" onclick="set_fake_select(x2); return false;">Yellow2</a></option>
  <option><a name="fake_select" id="fake_select_opt6" onMouseover="change1('pic1','image4')" onclick="set_fake_select(x3); return false;">Yellow3</a></option>
  <option><a name="fake_select" id="fake_select_opt7" onMouseover="change1('pic1','image2')" onclick="set_fake_select(x4); return false;">Yellow4</a></option>
  <option><a name="fake_select" id="fake_select_opt8" onMouseover="change1('pic1','image3')" onclick="set_fake_select(x5); return false;">Yellow5</a></option>
</select>
</div>

</code>
</pre>
</td>
<td>

<P>
<IMG SRC="scare.jpg" name="pic1" width="100" height="100" border="0">

</td></tr></table>




<pre>
<code allow="none">


</code>
</pre>

<pre>
<SCRIPT language="JavaScript">
function set_fake_select(id) {
  //turn off any active options
  var elems = document.getElementsByName("fake_select");
  for(var i=0; i < elems.length; i++) {
      elems[i].className = "";
  }

  //mark the fake option as active
  document.getElementById("fake_select_opt" + id).className = "active";

  //store the value in the hidden form field for submission
  document.getElementById("select").value = id;
}
</script>
</pre>
</div></div></div>
</body>
</html>
Avatar billede claes57 Ekspert
01. maj 2015 - 14:32 #5
function change1(picName,imgName)
{
  if (document.images)
    {
      imgOn=eval(imgName + ".src");
      document[picName].src= imgOn;
    }
}

mangler der ikke et . i
document[picName].src
Avatar billede w126 Juniormester
02. maj 2015 - 19:44 #6
Hej Claes
det her virker men så det ikke drop Down liste kan du se hva jeg gør galt ?

-----------------------------------------------------------------
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                   
    <title>title here</title>
           
        <script type="text/javascript">
            SyntaxHighlighter.config.clipboardSwf = '/js/syntaxhighlighter/clipboard.swf';
            SyntaxHighlighter.all();
        </script>

<!-- start add by me -->
  <SCRIPT language="JavaScript">
<!--
  if (document.images)
  {
    image_off= new Image(100,100);
    image_off.src="scare.jpg"; 

    image2= new Image(100,100);
    image2.src="../img/thumb1.jpg";
    image3= new Image(100,100);
    image3.src="../img/thumb2.jpg"; 
    image4= new Image(100,100);
    image4.src="../img/thumb1.jpg"; 
    image5= new Image(100,100);
    image5.src="../img/thumb2.jpg"; 
  }

function change1(picName,imgName)
{
  if (document.images)
    {
      imgOn=eval(imgName + ".src");
      document[picName].src= imgOn;
     
    }
}
//-->
</SCRIPT>


<!-- end add by me -->
</head>
<body>
<table border=0 cellpadding=15><tr><td>
<pre>
<code allow="none">
<div class="fake_select">
<input type="hidden" name="select1" value="" id="select1" />
  <option><a name="fake_select1" id="fake_select_opt1" onMouseover="change1('pic1','image2')" onclick="set_fake_select(red); return false;">red</a></option>
  <option><a name="fake_select1" id="fake_select_opt2" onMouseover="change1('pic1','image3')" onclick="set_fake_select(blue); return false;">blue</a></option>
  <option><a name="fake_select1" id="fake_select_opt3" onMouseover="change1('pic1','image4')" onclick="set_fake_select(yellow); return false;">Yellow</a></option>

  <option><a name="fake_select1" id="fake_select_opt4" onMouseover="change1('pic1','image2')" onclick="set_fake_select(x); return false;">Yellow</a></option>
  <option><a name="fake_select1" id="fake_select_opt5" onMouseover="change1('pic1','image3')" onclick="set_fake_select(x2); return false;">Yellow2</a></option>
  <option><a name="fake_select1" id="fake_select_opt6" onMouseover="change1('pic1','image4')" onclick="set_fake_select(x3); return false;">Yellow3</a></option>
  <option><a name="fake_select1" id="fake_select_opt7" onMouseover="change1('pic1','image2')" onclick="set_fake_select(x4); return false;">Yellow4</a></option>
  <option><a name="fake_select1" id="fake_select_opt8" onMouseover="change1('pic1','image3')" onclick="set_fake_select(x5); return false;">Yellow5</a></option>

</div>

</code>
</pre>
</td>
<td>

<P>
<IMG SRC="scare.jpg" name="pic1" width="100" height="100" border="0">

</td></tr></table>




<pre>
<code allow="none">
<style>
  div.fake_select {
      border: 1px solid #000;
      width: 150px;
      height: 25px;
      overflow: auto;
  }

  div.fake_select a {
      padding: 1px 3px;
      margin: 0;
      cursor: pointer;
      cursor: hand;
      border: 0;
      border-bottom: 1px solid #ddd;
      display: inline-block;
  }

  div.fake_select a:hover {
      text-decoration: none;
      color: #002;
  }

  div.fake_select a.active {
      background-color: #ffcc33;
      color: #ccff66;
  }

</style>

</code>
</pre>

<pre>
<SCRIPT language="JavaScript">
function set_fake_select(id) {
  //turn off any active options
  var elems = document.getElementsByName("fake_select1");
  for(var i=0; i < elems.length; i++) {
      elems[i].className = "";
  }

  //mark the fake option as active
  document.getElementById("fake_select_opt" + id).className = "active";

  //store the value in the hidden form field for submission
  document.getElementById("select1").value = id;
}
</script>
</pre>

</body>
</html>
Avatar billede claes57 Ekspert
02. maj 2015 - 20:23 #7
Det er ligemeget hvad du kalder de forskellige tags, men hvis de ikke er <select> så er det ikke dropdown.
<option> er alm radio-prikud-knapvalg.
Hvis du vil have dropdown, så er der ingen grund til at teste andre tags.
Avatar billede w126 Juniormester
02. maj 2015 - 20:53 #8
har prøvet med drop Down men så viser det ikke billede.
Avatar billede claes57 Ekspert
02. maj 2015 - 21:13 #9
Ok, så kan man ikke have en <a> inde i en select. Så ved vi det. Så må du vælge et andet design.
Avatar billede w126 Juniormester
02. maj 2015 - 21:41 #10
har prøvet det her men heller ikke noget billede.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                   
    <title>title here</title>
           
        <script type="text/javascript">
            SyntaxHighlighter.config.clipboardSwf = '/js/syntaxhighlighter/clipboard.swf';
            SyntaxHighlighter.all();
        </script>

<!-- start add by me -->
  <SCRIPT language="JavaScript">
<!--
  if (document.images)
  {
    image_off= new Image(100,100);
    image_off.src="scare.jpg"; 

    image2= new Image(100,100);
    image2.src="img/thumb1.jpg";
    image3= new Image(100,100);
    image3.src="img/thumb2.jpg"; 
    image4= new Image(100,100);
    image4.src="img/thumb1.jpg"; 
    image5= new Image(100,100);
    image5.src="img/thumb2.jpg"; 
  }

function change1(picName,imgName)
{
  if (document.images)
    {
      imgOn=eval(imgName + ".src");
      document[picName].src= imgOn;

    }
}
//-->
</SCRIPT>


<!-- end add by me -->
</head>
<body>
<table border=0 cellpadding=15><tr><td>
<pre>
<code allow="none">
<div class="fake_select">
<select name="select1" value="" id="select1">
  <option name="fake_select1" id="fake_select_opt1" onMouseover="change1('pic1','image2')" onclick="set_fake_select(red); return false;">red</option>
  <option name="fake_select1" id="fake_select_opt2" onMouseover="change1('pic1','image3')" onclick="set_fake_select(blue); return false;">blue</option>
  <option name="fake_select1" id="fake_select_opt3" onMouseover="change1('pic1','image4')" onclick="set_fake_select(yellow); return false;">Yellow</option>
  <option name="fake_select1" id="fake_select_opt4" onMouseover="change1('pic1','image2')" onclick="set_fake_select(x); return false;">Yellow</option>
  <option name="fake_select1" id="fake_select_opt5" onMouseover="change1('pic1','image3')" onclick="set_fake_select(x2); return false;">Yellow2</option>
  <option name="fake_select1" id="fake_select_opt6" onMouseover="change1('pic1','image4')" onclick="set_fake_select(x3); return false;">Yellow3</option>
  <option name="fake_select1" id="fake_select_opt7" onMouseover="change1('pic1','image2')" onclick="set_fake_select(x4); return false;">Yellow4</option>
  <option name="fake_select1" id="fake_select_opt8" onMouseover="change1('pic1','image3')" onclick="set_fake_select(x5); return false;">Yellow5</option>
</select>
</div>

</code>
</pre>
</td>
<td>

<P>
<IMG SRC="scare.jpg" name="pic1" width="100" height="100" border="0">

</td></tr></table>




<pre>
<code allow="none">


</code>
</pre>

<pre>
<SCRIPT language="JavaScript">
function set_fake_select(id) {
  //turn off any active options
  var elems = document.getElementsByName("fake_select1");
  for(var i=0; i < elems.length; i++) {
      elems[i].className = "";
  }

  //mark the fake option as active
  document.getElementById("fake_select_opt" + id).className = "active";

  //store the value in the hidden form field for submission
  document.getElementById("select1").value = id;
}
</script>
</pre>

</body>
</html>
Avatar billede w126 Juniormester
06. maj 2015 - 15:59 #11
nå det måske helt umuligt :(
Avatar billede claes57 Ekspert
06. maj 2015 - 16:30 #12
dette virker - men har et anderledes layout
<form method="post" action="">
<IMG SRC="scare.jpg" id="pic1" width="100" height="100" border="0"><br>
  <a href="#" onMouseover="document.getElementById('pic1').src = 'smimages/smfile.gif'" ><input type="radio" name="valg" value="1"> Sten</a><br>
  <a href="#" onMouseover="document.getElementById('pic1').src = 'smimages/smfolder.gif'" ><input type="radio" name="valg" value="2"> Grus<br>
  <a href="#" onMouseover="document.getElementById('pic1').src = 'smimages/smimg.gif'" ><input type="radio" name="valg" value="3"> Ral<br>
</form>
Avatar billede w126 Juniormester
06. maj 2015 - 17:01 #13
Hej Claes
ja men ville helst undgå det. Det sku flettes ind på min kontakt side du kan se den her santorbrolaegning.dk
Avatar billede claes57 Ekspert
06. maj 2015 - 17:14 #14
Ok. Jeg har engang lavet noget lignende. Men billede vises først ved select. Kunden må så vælge sig gennem listen format se alle billeder. Jeg finder koden frem...
Avatar billede w126 Juniormester
06. maj 2015 - 17:16 #15
ok lyder godt.
Avatar billede claes57 Ekspert
07. maj 2015 - 13:10 #16
Jeg har desværre ikke kunne finde min kode fra hin tid. Så jeg dropper ud her.
Avatar billede w126 Juniormester
20. maj 2015 - 13:57 #17
lukker.
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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