?
Solved

How to put 3 icons in a bar in a website using a javascript

Posted on 2014-11-18
4
Medium Priority
?
120 Views
Last Modified: 2014-11-18
Dear Experts,

I have a bar drawn on my website (see picture) that I have put as attachement. The bar with the date and the word "Contact" is the
bar that I am talking about. The bar is drawn throug a javascript. What I would like in the bar is instead of the word "Contact" I
would like the 3 icons displayed just like experts-exchange has (the mail icon, the notification icon and the suitcase icon). How can
I do that. Does someone knows the answer and is willing to help me.

<!-- Begin

var showdate	= "yes"		// SHOW THE DATE ON THE PAGE
var showbar2	= "yes"		// SHOW THE DATE ON THE PAGE

document.write('<table cellpadding="0" cellspacing="0" border="0" width="100%" class="headerbar"><tr><td align="left" class="printhide">');


// START DATE SCRIPT

   if (showdate == "yes") {

document.write('<div id="date-location">');
var d=new Date();
var weekday=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
var monthname=new Array("January","February","March","April","May","June","July","August","September","October","November","December");
document.write("<span class=\"date-font\"><nobr>" + weekday[d.getDay()] + ", ");

document.write(monthname[d.getMonth()] + " ");

document.write(d.getDate() + ", ");

document.write(d.getFullYear());
document.write("</nobr><br></span>");
document.write('</div>');
}
else {
document.write('&nbsp;<br>');
}

document.write('</td><td align="right">');

document.write('<div id="contact-location">');

document.write('<a href="contact.htm" class="barlink">Cont@ct</a><br>');

document.write('</div>');

document.write('</td></tr></table>');

if (showbar2 == "yes") {
document.write('<table cellpadding="0" cellspacing="0" border="0" width="100%" class="headerbar2"><tr><td class="printhide">');
document.write('<img src="picts/spacer.gif" height="2" width="2" border="0"><br>');
document.write('</td></tr></table>');
}

//  End -->

Open in new window


Greetings, Peter Kiers
Example.png
0
Comment
Question by:peterkiers
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 19

Expert Comment

by:Greg Alexander
ID: 40450000
Assuming you are not using an icon pack, and you have the icons as images you could simply change

document.write('<a href="contact.htm" class="barlink">Cont@ct</a><br>');

Open in new window


to

document.write('<img src="the_path_to_image1.jpg" alt="img_name"><img src="the_path_to_image2.jpg" alt="img_name"><img src="the_path_to_image3.jpg" alt="img_name"><br>');

Open in new window

0
 
LVL 1

Author Comment

by:peterkiers
ID: 40450078
Oke thanks. What's the code when the user clicks on the picture is should load another webpage. What's the code for  that. Grtz, Peter
0
 
LVL 19

Accepted Solution

by:
Greg Alexander earned 1000 total points
ID: 40450087
Add some link tags around the image like so:

document.write('<a href="http://google.com"><img src="the_path_to_image1.jpg" alt="img_name"></a><a href="http://google.com"><img src="the_path_to_image2.jpg" alt="img_name"></a><a href="http://google.com"><img src="the_path_to_image3.jpg" alt="img_name"></a><br>');
0
 
LVL 1

Author Comment

by:peterkiers
ID: 40450104
Thanks. Peter
0

Featured Post

WordPress Tutorial 3: Plugins, Themes, and Widgets

The three most common changes you will make to your website involve the look (themes), the functionality (plugins), and modular elements (widgets).

In this article we will briefly define each again, and give you directions on how to install them.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Find out what you should include to make the best professional email signature for your organization.
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question