CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg
Cookie ikon
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

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Bredde på div elementer Af dane022 i HTML 2 16/02/202408:29 20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML 2 21/12/202322:51 22/12/202308:03
validering <input tlfnr. Af slein55 i HTML 5 15/10/202311:43 15/10/202314:51
Link fra form input Af jnrmgs i HTML 9 19/09/202319:10 23/09/202313:11
includere i HTML Af slein55 i HTML 3 15/09/202313:47 16/09/202309:40
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester



Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
44 min siden Få den nuværende outlook som default i stedet for det nye Af RikkePrikke i E-mail programmer
I dag 13:33 Vagtliste med rul mellem skifter Af Klaus W i Excel
I dag 10:54 Formelhjælp Af boro23 i Excel
I dag 09:01 PDF udskrift tager MEGET lang tid Af Mainbrain i Andet software
I går 19:08 Gmail shortcut på skrivebord eller processlinje Af nu_igen i E-mail programmer
White papers
Flere white papers »


Premium
Teaser billede
Medarbejderne fik udleveret badetøfler ved indflytningen: Kom med inden for i IBM Danmarks nye topmoderne hovedkontor
Læs mere »
Cyber-gidselforhandler løfter sløret: Sådan undgår du at blive ramt af den frygtede 'double whammy'
Her er de 10 bedste arbejdspladser i den danske it-branche
Sådan har Novo sat AI i arbejde: Læs Computerworlds store temanummer om AI i forretningen
Se alle »
Computerworld
Teaser billede
Du bør vente med at købe ny bærbar: En pc-revolution vil ramme allerede til sommer
Læs mere »
Test af ny generation af video-overvågning: Her tilbydes de bedste features – nu til en skarpere pris
Guldager: Jeg har bare tre enkle ønsker til min næste bil
Får du den løn, du fortjener? Få overblikket over hvor meget dine kolleger tjener hver måned
Se alle »
CIO
Teaser billede
Aldrende SAP-konsulenter er et kæmpe problem i markedet: Virksomheder tør ikke uddanne nye
Læs mere »
Kæmpe prisstigninger på vej fra Microsoft: Dynamics 365 bliver op til 16 procent dyrere
Danske CloudNordic går konkurs efter stort ransomware-angreb
Stort angreb skyller ind over en lang række VPN-tjenester: Løsninger fra Cisco, Fortinet og andre ramt
Se alle »
Job & Karriere
Teaser billede
NNIT flytter til det centrale København: Her er selskabets nye hovedkvarter
Læs mere »
Får havudsigt: IBM Danmarks 700 medarbejdere flytter til nyt hovedkvarter om få dage
Knap 40 procent af disse it-folk tjener tjener mindst 57.000 kroner om måneden
Fujitsu Danmark fyrer medarbejdere og udfaser al nysalg af cloud
Se alle »
White paper
Teaser billede
Opdag fordelene ved cloud-baseret backup og recovery
Læs mere »
Få mere ud af din cloudinfrastruktur og gør op med de konstant stigende omkostninger
Vejen væk fra WAN: Sådan skifter du til en moderne infrastruktur
Nemmere overblik, styring og omkostningskontrol i dit multicloud-miljø
Se alle »

Events
Flere events »
White papers
Flere white papers »
IT-Kurser
Se alle vores it-kurser »