Welcome, Guest
Username Password: Remember me
  • Page:
  • 1

TOPIC: Displaying org chart graphic with links?

Displaying org chart graphic with links? 11 years, 2 months ago #111

  • bradh
  • OFFLINE
  • Junior Boarder
  • Posts: 38
  • Karma: 0
How would you place an organizational chart graphic on a Joomla website with multiple links on the graphic to various pages?
Sincerely,

Rob McBryde
Web Developer
http://www.ivmwebsolutions.com
The topic has been locked.

Displaying org chart graphic with links? 11 years, 2 months ago #113

  • joomtorial
Hi Rob,

Assuming you have an html editor like MacroMedia (or nowadays Adobe) DreamWeaver, I would advise to use "hotspots".

Create a new html page. Insert your image in that page and then for the image, you are able to draw hotspots for the areas you wish. Those areas (hotspots) can have the url's you want.

[attachment=1:1b9j2z02]<!-- ia1 -->Dreamweaver.jpg<!-- ia1 -->[/attachment:1b9j2z02]

Once you have created the DreamWeaver page, you will need to go into source view and copy the html code. In my sample the code would be in between the <body> and </body> tags (DO NOT COPY THOSE!)

So the code of my sample to use in Joomla is:

<img src="http://joomla15.joomtorial.com/images/stories/graph.png" width="512" height="512" border="0" usemap="#Map" />
<map name="Map" id="Map">
  <area shape="poly" coords="168,386,142,332,131,241,207,218,240,268,241,360" href="http://www.google.com" target="_blank" alt="orange" />
<area shape="poly" coords="264,352,243,314,243,269,235,253,233,139,311,118,345,167,334,330" href="http://www.yahoo.com" target="_blank" alt="green" />
<area shape="poly" coords="355,320" href="#" /><area shape="poly" coords="355,321,338,298,349,162,333,143,342,24,421,4,465,48,424,298" href="http://www.msn.com" target="_blank" alt="blue" />
</map>


When you want to use this code in Joomla, you can't simply use the WYSIWYG editor. You will need to go to Joomla's Global Configuration and set your editor to "No Editor". Only then paste the code from DreamWeaver otherwise your WYSIWYG Joomla editor will rewrite and leave important codes out.

[attachment=0:1b9j2z02]<!-- ia0 -->Joomla Video Tutorials - Administration.jpg<!-- ia0 -->[/attachment:1b9j2z02]

I created a working sample of this and that can be seen here: http://joomla15.joomtorial.com/index.ph ... &Itemid=53
Attachments:
The topic has been locked.

Displaying org chart graphic with links? 11 years, 2 months ago #114

  • bradh
  • OFFLINE
  • Junior Boarder
  • Posts: 38
  • Karma: 0
Sounds like a plan!

Thanks!
Sincerely,

Rob McBryde
Web Developer
http://www.ivmwebsolutions.com
The topic has been locked.
  • Page:
  • 1
Time to create page: 0.17 seconds

Joomla Video Tutorials by Joomtorial