hyperlink generator

shout it · #1 (**permalink**) 01-29-09, 09:50 AM

I want to create a page that will create code for a hyperlink to my website.
The idea is simple i will have a page with a table divided into sections.
the first will contain a number of different images with a radio button next to each. The user must click one of the radio buttons which will then store the code source for that image in a table at the button.
The user will then move down and click a radio button next to which catogory the link will goto (the text of the catogory will be visible eg flowers , the code would be www.domainname.com/flowers.php)
Again the code would be added at the bottom which the image source.
When complete the idea is the user then copies the code in the box for the hyperlink code and then pastes it into their website.

Anyone help as i have very limited coding experiance or knowledge
Thanks
Craig

job0107 · #2 (**permalink**) 01-29-09, 10:55 AM

This is very simple and could be written to do more, but you get the idea.
It's also written in Javascript instead of PHP, but with a little work, it could be converted.
You change the image names and the addresses to the names and addresses you want.

Javascript Code:

<html>
<head>
<script>
var theCode = "";
function add_image(v)
{
 theCode = "<img src='";
 theCode += v;
 theCode += "'>";
 document.getElementById("ta1").value = theCode;
 document.getElementById("div1").innerHTML = theCode;
 }
function add_link(v)
{
 theCode = "<a href='"+v+"'>"+theCode+"</a>";
 document.getElementById("ta1").value = theCode;
 document.getElementById("div1").innerHTML = theCode;
 }
</script>
</head>
<body>
<table border='1'>
 <tr>
  <td>
   <input type="radio" name="img_radio" value="image1.jpg" onclick="add_image(this.value);"><img src="image1.jpg"><br />
   <input type="radio" name="img_radio" value="image2.jpg" onclick="add_image(this.value);"><img src="image2.jpg"><br />
   <input type="radio" name="img_radio" value="image3.jpg" onclick="add_image(this.value);"><img src="image3.jpg"><br />
   <input type="radio" name="img_radio" value="image4.jpg" onclick="add_image(this.value);"><img src="image4.jpg"><br />
   <input type="radio" name="img_radio" value="image5.jpg" onclick="add_image(this.value);"><img src="image5.jpg"><br />
   <input type="radio" name="img_radio" value="image6.jpg" onclick="add_image(this.value);"><img src="image6.jpg"><br />
  </td>
 </tr>
 <tr>
  <td>
   <input type="radio" name="img_radio1" value="www.domainname.com/flowers.php" onclick="add_link(this.value);">Flowers<br />
   <input type="radio" name="img_radio1" value="www.domainname.com/flowers.php" onclick="add_link(this.value);">Flowers<br />
   <input type="radio" name="img_radio1" value="www.domainname.com/flowers.php" onclick="add_link(this.value);">Flowers<br />
   <input type="radio" name="img_radio1" value="www.domainname.com/flowers.php" onclick="add_link(this.value);">Flowers<br />
   <input type="radio" name="img_radio1" value="www.domainname.com/flowers.php" onclick="add_link(this.value);">Flowers<br />
   <input type="radio" name="img_radio1" value="www.domainname.com/flowers.php" onclick="add_link(this.value);">Flowers<br />
  </td>
 </tr>
</table>
<br /><br />Highlight and copy code.<br />
<table>
 <tr>
  <td>
   <textarea id="ta1" readonly style="width:580px;height:40px;"></textarea>
   <br /><br />Test code.<br />
   <div id="div1" style="width:30px;height:30px;border:1px solid #000;"></div>
  </td>
 </tr>
</table>
</body>
</html>

shout it · #3 (**permalink**) 01-29-09, 11:34 AM

i have tested the code and it is perfect exactly what i have been trying to get, the only thing i did not think about is when you press the image radio button it sets
the image section but when i go to use the link to the part of the website i have found that i can select a number of different links is there a way to set only one option at a time?

Thanks again craig

job0107 · #4 (**permalink**) 01-29-09, 02:32 PM

This code allows you to select only one of each and it has a reset button if you want to start over.

Javascript Code:

<html>
<head>
<script>
var theCode = "";
var setCode = 0;
function add_image(v)
{
 if(setCode==0)
 {
  theCode = "<img src='";
  theCode += v;
  theCode += "'>";
  document.getElementById("ta1").value = theCode;
  document.getElementById("div1").innerHTML = theCode;
  setCode=1;
  }
 }
function add_link(v)
{
 if(setCode==1)
 {
  theCode = "<a href='"+v+"'>"+theCode+"</a>";
  document.getElementById("ta1").value = theCode;
  document.getElementById("div1").innerHTML = theCode;
  setCode=2;
  }
 }
function reset_it()
{
 setCode = 0;
 document.getElementById("ta1").value = "";
 document.getElementById("div1").innerHTML = "";
 for(var i=0;i<document.theForm.img_radio.length;i++)
 {
  document.theForm.img_radio[i].checked=false;
  }
 for(var i=0;i<document.theForm.img_radio1.length;i++)
 {
  document.theForm.img_radio1[i].checked=false;
  }
 }
</script>
<style>
.div_style
{
 border:1px solid #000;
 font-size:16px;
 padding:3px;
 font-weight:bold;
 margin-bottom:5px;
 }
#ta1
{
 width:580px;
 height:40px;
 }
#div1
{
 width:30px;
 height:30px;
 border:1px solid #000;
 }
</style>
</head>
<body>
<form name="theForm">
 <table border='1'>
  <tr>
   <td>
    <div class="div_style">First select an image.</div>
    <input type="radio" name="img_radio" value="image1.jpg" onclick="add_image(this.value);"><img src="image1.jpg"><br />
    <input type="radio" name="img_radio" value="image2.jpg" onclick="add_image(this.value);"><img src="image2.jpg"><br />
    <input type="radio" name="img_radio" value="image3.jpg" onclick="add_image(this.value);"><img src="image3.jpg"><br />
    <input type="radio" name="img_radio" value="image4.jpg" onclick="add_image(this.value);"><img src="image4.jpg"><br />
    <input type="radio" name="img_radio" value="image5.jpg" onclick="add_image(this.value);"><img src="image5.jpg"><br />
    <input type="radio" name="img_radio" value="image6.jpg" onclick="add_image(this.value);"><img src="image6.jpg">
   </td>
  </tr>
  <tr>
   <td>
    <div class="div_style">Then select a category.</div>
    <input type="radio" name="img_radio1" value="www.domainname.com/flowers.php" onclick="add_link(this.value);">Flowers<br />
    <input type="radio" name="img_radio1" value="www.domainname.com/flowers.php" onclick="add_link(this.value);">Flowers<br />
    <input type="radio" name="img_radio1" value="www.domainname.com/flowers.php" onclick="add_link(this.value);">Flowers<br />
    <input type="radio" name="img_radio1" value="www.domainname.com/flowers.php" onclick="add_link(this.value);">Flowers<br />
    <input type="radio" name="img_radio1" value="www.domainname.com/flowers.php" onclick="add_link(this.value);">Flowers<br />
    <input type="radio" name="img_radio1" value="www.domainname.com/flowers.php" onclick="add_link(this.value);">Flowers
   </td>
  </tr>
  <tr>
   <td align="center">
    <input type="button" value="reset" onclick="reset_it();">
   </td>
  </tr>
 </table>
 <br />Highlight and copy code.<br />
 <table>
  <tr>
   <td>
    <textarea id="ta1" readonly></textarea>
    <br />Test code.<br />
    <div id="div1"></div>
   </td>
  </tr>
 </table>
</form>
</body>
</html>

shout it · #5 (**permalink**) 01-29-09, 03:33 PM

thanks for the reset button it works great.
There is one last thing that i had tried in the past and never got it right and that was to get the radio buttons to work.
I did once consider dividing the image into into three sections as hotspots for hyperlinks, i have tried and failed every time.
Is there anyway you could help: i have always wanted to have an image select part each image divided into three parts the 1 st part is a link select like you have created then another link part with radio buttons would set the next link on the image hotspot number 2 and so on for number three the code i have used as an example for the hotspots is as follows
<p><map name="FPMap0">
<area href="soruce1" shape="rect" coords="3, 3, 151, 47">
<area href="source2" shape="rect" coords="4, 47, 79, 84">
<area coords="79, 48, 151, 84" shape="rect" href="source3">
</map>
<img border="0" src="images/SIASlogo%20with%20hotspot%20for%20hyper.gif" width="152" height="85" usemap="#FPMap0"></p>

Anyway you can help?

Thanks
Craig

job0107 · #6 (**permalink**) 01-29-09, 10:23 PM

This code may work for you a bit better.
I hope I included all the necessary features.
Give it a test drive and see if you can think of anything I left out.

Javascript Code:

<html>
<head>
<script>
var theCode = "";
var setCode = 0;
function add_image(v)
{
  reset_category();
  theCode = "<img src='";
  theCode += v;
  theCode += "'>";
  document.getElementById("ta1").value = theCode;
  document.getElementById("div1").innerHTML = theCode;
  setCode=1;
 }
function add_link(v)
{
 if(setCode==1)
 {
  theCode1 = "<a href='"+v+"'>"+theCode+"</a>";
  document.getElementById("ta1").value = theCode1;
  document.getElementById("div1").innerHTML = theCode1;
  document.getElementById("btn1").style.visibility="visible";
  }
 }
function reset_all()
{
 setCode = 0;
 for(var i=0;i<document.theForm.img_radio.length;i++)
 {
  document.theForm.img_radio[i].checked=false;
  }
 reset_category();
 }
function reset_category()
{
 for(var i=0;i<document.theForm.img_radio1.length;i++)
 {
  document.theForm.img_radio1[i].checked=false;
  }
 document.getElementById("ta1").value = "";
 document.getElementById("div1").innerHTML = "";
 document.getElementById("btn1").style.visibility="hidden";
 }
function highlight_code()
{
 document.getElementById("ta1").select();
 }
</script>
<style>
.div_style
{
 border:1px solid #000;
 font-size:16px;
 padding:3px;
 font-weight:bold;
 margin-bottom:5px;
 }
#ta1
{
 width:600px;
 height:40px;
 }
#div1
{
 width:30px;
 height:30px;
 border:1px solid #000;
 }
</style>
</head>
<body>
<form name="theForm">
 <table border="1">
  <tr>
   <td>
    <div class="div_style">First select an image.</div>
    <input type="radio" name="img_radio" value="image1.jpg" onclick="add_image(this.value);"><img src="image1.jpg"><br />
    <input type="radio" name="img_radio" value="image2.jpg" onclick="add_image(this.value);"><img src="image2.jpg"><br />
    <input type="radio" name="img_radio" value="image3.jpg" onclick="add_image(this.value);"><img src="image3.jpg"><br />
    <input type="radio" name="img_radio" value="image4.jpg" onclick="add_image(this.value);"><img src="image4.jpg"><br />
    <input type="radio" name="img_radio" value="image5.jpg" onclick="add_image(this.value);"><img src="image5.jpg"><br />
    <input type="radio" name="img_radio" value="image6.jpg" onclick="add_image(this.value);"><img src="image6.jpg">
   </td>
   <td align="center">
    <b><u>Highlight and copy code.</u></b>
    <p><textarea id="ta1" readonly></textarea></p>
    <input id="btn1" type="button" value="Select All" onclick="highlight_code();" style="visibility:hidden;">
   </td>
  </tr>
  <tr>
   <td>
    <div class="div_style">Then select a category.</div>
    <input type="radio" name="img_radio1" value="www.domainname.com/flowers1.php" onclick="add_link(this.value);">Flowers 1<br />
    <input type="radio" name="img_radio1" value="www.domainname.com/flowers2.php" onclick="add_link(this.value);">Flowers 2<br />
    <input type="radio" name="img_radio1" value="www.domainname.com/flowers3.php" onclick="add_link(this.value);">Flowers 3<br />
    <input type="radio" name="img_radio1" value="www.domainname.com/flowers4.php" onclick="add_link(this.value);">Flowers 4<br />
    <input type="radio" name="img_radio1" value="www.domainname.com/flowers5.php" onclick="add_link(this.value);">Flowers 5<br />
    <input type="radio" name="img_radio1" value="www.domainname.com/flowers6.php" onclick="add_link(this.value);">Flowers 6
   </td>
   <td align="center">
    <b><u>Test code.</u></b>
    <p><div id="div1"></div></p>
   </td>
  </tr>
  <tr>
   <td align="center" colspan="2">
    <input type="button" value="Reset" onclick="reset_all();">
   </td>
  </tr>
 </table>
</form>
</body>
</html>

job0107 · #7 (**permalink**) 01-30-09, 12:51 AM

To set the href in the area elements of a map element using Javascript and have them stay changed when the page is refreshed or re-visited, requires the use of cookies.

In this program I create two cookies for each area element.
The cookies are set to last 14 days every time they are changed.

If you don't make any changes after 14 days, then the default values will be used.
The default values are the original values written into the code.
In this case they are "soruce1", "soruce2" and "soruce3".

Javascript Code:

<html>
<head>
<script>
function _init()
{
 if(readCookie("area_1")&&readCookie("area_11"))
 {
  change_area(readCookie("area_11"),readCookie("area_1"),"area_1")
  }
 if(readCookie("area_2")&&readCookie("area_21"))
 {
  change_area(readCookie("area_21"),readCookie("area_2"),"area_2")
  }
 if(readCookie("area_3")&&readCookie("area_31"))
 {
  change_area(readCookie("area_31"),readCookie("area_3"),"area_3")
  }
 }
function change_area(obj,v,id)
{
 var id1 = id+"1";
 createCookie(id,v,14);
 createCookie(id1,obj,14);
 document.getElementById(id).href=v;
 document.getElementById(obj).checked=true;
 document.getElementById("ta1").value=document.getElementById("map_container").innerHTML;
 }
function createCookie(name,value,days)
{
 if(days)
 {
  var date = new Date();
  date.setTime(date.getTime()+(days*24*60*60*1000));
  var expires = "; expires="+date.toGMTString();
  }
 else var expires = "";
 document.cookie = name+"="+value+expires+"; path=/";
 }
function readCookie(name)
{
 var nameEQ = name + "=";
 var ca = document.cookie.split(';');
 for(var i=0;i < ca.length;i++)
 {
  var c = ca[i];
  while (c.charAt(0)==' ') c = c.substring(1,c.length);
  if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
 return null;
 }
function highlight_code()
{
 document.getElementById("ta1").select();
 }
</script>
<style>
.div_style
{
 border:1px solid #000;
 font-size:16px;
 padding:3px;
 font-weight:bold;
 margin-bottom:5px;
 }
#ta1
{
 width:600px;
 height:80px;
 }
#div1
{
 width:30px;
 height:30px;
 border:1px solid #000;
 }
</style>
</head>
<body onload="_init();">
<form name="theForm">
 <table border="1">
  <tr>
   <td>
    <div class="div_style">Area 1</div>
    <input type="radio" name="radio_1" id="r1" value="page_1.php" onclick="change_area(this.id,this.value,'area_1');">Page 1<br />
    <input type="radio" name="radio_1" id="r2" value="page_2.php" onclick="change_area(this.id,this.value,'area_1');">Page 2<br />
    <input type="radio" name="radio_1" id="r3" value="page_3.php" onclick="change_area(this.id,this.value,'area_1');">Page 3<br />
    <input type="radio" name="radio_1" id="r4" value="page_4.php" onclick="change_area(this.id,this.value,'area_1');">Page 4<br />
    <input type="radio" name="radio_1" id="r5" value="page_5.php" onclick="change_area(this.id,this.value,'area_1');">Page 5<br />
    <input type="radio" name="radio_1" id="r6" value="page_6.php" onclick="change_area(this.id,this.value,'area_1');">Page 6
   </td>
   <td align="center" rowspan="2">
    <b><u>Test code.</u></b>
    <p id="map_container">
     <map name="FPMap0">
      <area id="area_1" href="soruce1" shape="rect" coords="3, 3, 151, 47">
      <area id="area_2" href="source2" shape="rect" coords="4, 47, 79, 84">
      <area id="area_3" href="source3" shape="rect" coords="79, 48, 151, 84">
     </map>
     <img border="0" src="images/SIASlogo%20with%20hotspot%20for%20hyper.gif" width="152" height="85" usemap="#FPMap0">
    </p>
   </td>
  </tr>
  <tr>
   <td>
    <div class="div_style">Area 2</div>
    <input type="radio" name="radio_2" id="r7" value="page_7.php" onclick="change_area(this.id,this.value,'area_2');">Page 7<br />
    <input type="radio" name="radio_2" id="r8" value="page_8.php" onclick="change_area(this.id,this.value,'area_2');">Page 8<br />
    <input type="radio" name="radio_2" id="r9" value="page_9.php" onclick="change_area(this.id,this.value,'area_2');">Page 9<br />
    <input type="radio" name="radio_2" id="r10" value="page_10.php" onclick="change_area(this.id,this.value,'area_2');">Page 10<br />
    <input type="radio" name="radio_2" id="r11" value="page_11.php" onclick="change_area(this.id,this.value,'area_2');">Page 11<br />
    <input type="radio" name="radio_2" id="r12" value="page_12.php" onclick="change_area(this.id,this.value,'area_2');">Page 12
   </td>
  </tr>
  <tr>
   <td>
    <div class="div_style">Area 3</div>
    <input type="radio" name="radio_3" id="r13" value="page_13.php" onclick="change_area(this.id,this.value,'area_3');">Page 13<br />
    <input type="radio" name="radio_3" id="r14" value="page_14.php" onclick="change_area(this.id,this.value,'area_3');">Page 14<br />
    <input type="radio" name="radio_3" id="r15" value="page_15.php" onclick="change_area(this.id,this.value,'area_3');">Page 15<br />
    <input type="radio" name="radio_3" id="r16" value="page_16.php" onclick="change_area(this.id,this.value,'area_3');">Page 16<br />
    <input type="radio" name="radio_3" id="r17" value="page_17.php" onclick="change_area(this.id,this.value,'area_3');">Page 17<br />
    <input type="radio" name="radio_3" id="r18" value="page_18.php" onclick="change_area(this.id,this.value,'area_3');">Page 18
   </td>
   <td align="center">
    <b><u>Highlight and copy code.</u></b>
    <p><textarea id="ta1" readonly></textarea></p>
    <input id="btn1" type="button" value="Select All" onclick="highlight_code();">
   </td>
  </tr>
 </table>
</form>
</body>
</html>