Need to generate an image with an associated hyperlink

@nitramAug 05.2004

From a listbox I would like to generate differnet images (*.gif) and update (associate with the selection) an hyperlink accessible from the click of a button.

Please help.

Tx!

to post a comment

JavaScript

9 Comments(s) _↴

@steelersfan88Aug 05.2004 — #Is this what you are looking for?

[code=php]<style type="text/css">
 
 .fld {
 padding:5px;
 width:125px;
 text-align:center;
 }
 
 .pic {
 width:125px;
 float:left;
 text-align:center;
 }
 
 .lnk {
 color:blue;
 font-weight:bold; 

 }
 
 .img {
 width:65px;
 height:65px;
 }
 
 </style>
 
 <script type="text/javascript">
 
 function newPic(elem,si) {
 var lnk = elem[si].value;
 var txt = elem[si].text;
 var pic_src = elem[si].getAttribute('pic');
 
  var anch = document.createElement('a');
  anch.href = lnk;
  anch.title = txt;
  anch.className = 'lnk';
  anch.appendChild(document.createTextNode(txt));
 
  var pic = new Image();
  pic.src = pic_src;
  pic.alt = txt;
  pic.className = 'img';
 
  document.getElementById('pic').innerHTML = "";
 
  document.getElementById('pic').appendChild(pic);
  document.getElementById('pic').appendChild(document.createElement('BR'));
  document.getElementById('pic').appendChild(anch);
 }
 
 </script>
 
 <form method="post" action="script.pl" onsubmit="return false;">
 <fieldset class="fld"><legend>Select a Picture</legend>
 <select id="sports" name="sports" onchange="newPic(this,selectedIndex)">
 <option value="http://mlb.com" pic="mlb.gif">MLB</option>
 <option value="http://nhl.com" pic="nhl.gif">NHL</option>
 <option value="http://nba.com" pic="nba.gif">NBA</option>
 <option value="http://nfl.com" pic="nfl.gif">NFL</option>
 </select>
 </fieldset>
 </form>
 
 <div id="pic" class="pic">
 </div>[/code]

Dr. Script

@nitramauthorAug 07.2004 — #Thank you Dr Script your help is really appreciated. I would need one more thing to resolve.

I would also need to execute(post) the URL using a submit button that would have a different value displayed.

Do you have a solution.

Tx.

@steelersfan88Aug 07.2004 — #

[code=php]<form method="post" action="script.pl" onsubmit="onchange="newPic(this,selectedIndex);return false;"> 
 <fieldset class="fld"><legend>Select a Picture</legend> 
 <select id="sports" name="sports"> 
 <option value="http://mlb.com" pic="mlb.gif">MLB</option> 
 <option value="http://nhl.com" pic="nhl.gif">NHL</option> 
 <option value="http://nba.com" pic="nba.gif">NBA</option> 
 <option value="http://nfl.com" pic="nfl.gif">NFL</option> 
 </select>
 <buttont type="submit">Show!</button>
 </fieldset> 
 </form>[/code]

Is that what you need?

@nitramauthorAug 07.2004 — #Although I corrected the " missing on the form statement and eliminated the extra t to "button", clicking on the button does not post the URL. There is no picture appearing after the selection. There must be something missing!

Tx!

@steelersfan88Aug 07.2004 — #My fault, forgot to delete a lil bit of that code.[i]Originally posted by steelersfan88 [/i]

[B]

[code=php]<form method="post" action="script.pl" onsubmit="newPic(this,selectedIndex);return false;"> 
 <fieldset class="fld"><legend>Select a Picture</legend> 
 <select id="sports" name="sports"> 
 <option value="http://mlb.com" pic="mlb.gif">MLB</option> 
 <option value="http://nhl.com" pic="nhl.gif">NHL</option> 
 <option value="http://nba.com" pic="nba.gif">NBA</option> 
 <option value="http://nfl.com" pic="nfl.gif">NFL</option> 
 </select>
 <buttont type="submit">Show!</button>
 </fieldset> 
 </form>[/code]

[/B][/QUOTE] Sorry about that.

@nitramauthorAug 07.2004 — #Dr Script, This is the script with your correction. Unfortunatly it doesn't display the .gif and does not post the URL. There might be something wrong in the functions?

<style type="text/css">

.fld {

padding:5px;

width:125px;

text-align:center;

}

.pic {

width:125px;

float:left;

text-align:center;

}

.lnk {

color:blue;

font-weight:bold;

}

.img {

width:65px;

height:65px;

}

</style>

<script type="text/javascript">

function newPic(elem,si) {

var lnk = elem[si].value;

var txt = elem[si].text;

var pic_src = elem[si].getAttribute('pic');

var anch = document.createElement('a'); 
  anch.href = lnk; 
  anch.title = txt; 
  anch.className = 'lnk'; 
  anch.appendChild(document.createTextNode(txt)); 
 
  var pic = new Image(); 
  pic.src = pic_src; 
  pic.alt = txt; 
  pic.className = 'img'; 
 
  document.getElementById('pic').innerHTML = ""; 
 
  document.getElementById('pic').appendChild(pic); 
  document.getElementById('pic').appendChild(document.createElement('BR')); 
  document.getElementById('pic').appendChild(anch);

}

</script>

<form method="post" action="script.pl" onsubmit="newPic(this,selectedIndex);return false;">

<fieldset class="fld"><legend>Select a Picture</legend>

<select id="sports" name="sports">

<option value="http://mlb.com" pic="mlb.gif">MLB</option>

<option value="http://nhl.com" pic="nhl.gif">NHL</option>

<option value="http://nba.com" pic="nba.gif">NBA</option>

<option value="http://nfl.com" pic="nfl.gif">NFL</option>

</select>

<button type="submit">Show!</button>

</fieldset>

</form>

<div id="pic" class="pic">

</div>

@steelersfan88Aug 07.2004 — #I am very sorry, again. I get to bed oo late to do this early ?. When moving the event to the form tag, we need to change the object we are sending. We want to send the select box, not the form. Here it is, and tested ?

[code=php]<style type="text/css"> 
 
 .fld { 
 padding:5px; 
 width:145px; 
 text-align:center; 
 } 
 
 .pic { 
 width:145px; 
 float:left; 
 text-align:center; 
 } 
 
 .lnk { 
 color:blue; 
 font-weight:bold; 
 } 
 
 .img { 
 width:65px; 
 height:65px; 
 } 
 
 </style> 
 
 <script type="text/javascript"> 
 
 function newPic(elem,si) { 
 var si = elem.selectedIndex
 var lnk = elem[si].value; 
 var txt = elem[si].text; 
 var pic_src = elem[si].getAttribute('pic'); 
 
  var anch = document.createElement('a'); 
  anch.href = lnk; 
  anch.title = txt; 
  anch.className = 'lnk'; 
  anch.appendChild(document.createTextNode(txt)); 
 
  var pic = new Image(); 
  pic.src = pic_src; 
  pic.alt = txt; 
  pic.className = 'img'; 
 
  document.getElementById('pic').innerHTML = ""; 
 
  document.getElementById('pic').appendChild(pic); 
  document.getElementById('pic').appendChild(document.createElement('BR')); 
  document.getElementById('pic').appendChild(anch); 
 } 
 
 </script> 
 
 <form method="post" action="script.pl" onsubmit="newPic(this.sports);return false;"> 
 <fieldset class="fld"><legend>Select a Picture</legend> 
 Sport: <select id="sports" name="sports"> 
 <option value="http://mlb.com" pic="mlb.gif">MLB</option> 
 <option value="http://nhl.com" pic="nhl.gif">NHL</option> 
 <option value="http://nba.com" pic="nba.gif">NBA</option> 
 <option value="http://nfl.com" pic="nfl.gif">NFL</option> 
 </select><BR>
 <button type="submit">Show!</button> 
 </fieldset> 
 </form>
 
 <div id="pic" class="pic"> 
 </div>[/code]

Dr. Script

@nitramauthorAug 07.2004 — #Dr Script,

The last script you send works fine. However you probably misunderstood my original request.

Your first script you send worked fine for the exception of the link. In the first script the link is available by clicking the displayed value associated (ie. [U]NHL[/U]). What I need is a button to press to go to the URL (selected from the pull down menu which is associated with different values). This button would have a fixe value (ie. BUTTON), however it would post the url associated with the .gif image selected.

So to be perfectly clear. I would select NHL, I would then see the NHL logo and by pressing the button called "BUTTON" I would access the internet to the associated url.

Thanks again.

@steelersfan88Aug 07.2004 — #I understand ... replace the var anch = ".." until the double return (5 lines down) with

 var anch = document.createElement('button'); 
 anch.onclick = function() {
 window.location = lnk;
 }
 anch.setAttribute('type','button');
 anch.className = 'lnk'; 
 anch.appendChild(document.createTextNode(txt));[code]If you wnat the button to say the same thing, change the last line above to:[code]anch.appendChild(document.createTextNode('BUTTON TEXT HERE'));

Dr. Script

Also in #JavaScript _↴

How to keep DIV scroll down Calculate profit(Add one more function)Newbie Q: window.open() will not open if 2nd parameter is not quoted

Success!

Help @nitram spread the word by sharing this article on Twitter...

Tweet This

Need to generate an image with an associated hyperlink

9 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Need to generate an image with an associated hyperlink

9 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

9 Comments(s) _↴

Also in #JavaScript _↴