?
Solved

Joomla how to click graphic image and go to url

Posted on 2014-10-16
9
Medium Priority
?
289 Views
Last Modified: 2014-10-21
I am using the latest version of joomla hosted on my own server.

I have an image of a sine wave and when its clicked I want to have an mp3 play, it can either be via soundcloud or on the server itself but not sure how to do this part.

the last graphic in the code is called sineweb.


<p>[carousel]</p>
<p>[carousel_item]</p>
<p style="text-align: center;">AL1</p>
<p><img style="display: block; margin-left: auto; margin-right: auto;" src="images/P9275893.png" alt="" />
</p>
<p>[/carousel_item]</p>
<p>[carousel_item]</p>
<p style="text-align: center;">Colour Oak</p>
<p><img style="display: block; margin-left: auto; margin-right: auto;" src="images/P9075704.png" alt="P9075704" width="266" height="199" />[/carousel_item]</p>
<p>[carousel_item]</p>
<p style="text-align: center;">Colour Cherry</p>
<p style="text-align: center;"><img src="images/P9075706.png" alt="P9075706" width="270" height="202" />
</p>
<p style="text-align: left;">[/carousel_item]&nbsp;</p>
<p>[carousel_item]</p>
<p style="text-align: center;">Multiple Outputs</p>
<p style="text-align: center;"><img src="images/PA086979.png" alt="PA086979" />
</p>
<p style="text-align: left;">[/carousel_item]</p>
<p style="text-align: left;">[carousel_item]</p>
<p style="text-align: center;"><span style="text-align: center;">Listen</span>
</p>
<p style="text-align: center;">&nbsp;</p>
<p style="text-align: center;"><img src="images/sineWeb.png" alt="sineWeb" width="181" height="136" />
</p>
<p style="text-align: left;">[/carousel_item]</p>
<p>[/carousel]</p>

Open in new window

ee.JPG
0
Comment
Question by:PeterBaileyUk
[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
  • 5
  • 4
9 Comments
 
LVL 9

Expert Comment

by:Rowby Goren
ID: 40384650
Hi

Try doing this:  
<p style="text-align: center;"><a href="/music.mp3"><img src="images/sineWeb.png" alt="sineWeb" width="181" height="136" /></a>

Open in new window


Just link the image to the url of the mp3.   In that case it should bring up the mp3 player on the visitor's local computer.

There are other joomla plugins which would have the music play within the browser itself, but you can try this first, and see if it gives you what you want.

If you want to use a joomla plugin to to this, check out this player (I haven't tried it but lots of good reviews:  Mp3 player for articles
0
 

Author Comment

by:PeterBaileyUk
ID: 40384789
where do i store the mp3? in any particular directory
0
 
LVL 9

Accepted Solution

by:
Rowby Goren earned 2000 total points
ID: 40385082
If you are going to use just the "image link" method, then you can probably just create a directory off the webroot called mp3,  or whatever you want to name it -- and put your mp3's in that folder.  Probably want to include an index.html file in that folder to prevent people from peeking in that folder -- and for security reasons.

Rowby
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:PeterBaileyUk
ID: 40389684
can the index.html be blank? ive not heard of that before.
0
 

Author Comment

by:PeterBaileyUk
ID: 40389690
I have the web directory with a new mp3 folder and an mp3 file inside but i get page not found:

<p style="text-align: center;"><a href="/web/mp3/firtstest.mp3"><img src="images/sineWeb.png" alt="sineWeb" width="181" height="136" /></a>

i tried also without /mp3/firtstest.mp3
0
 

Author Closing Comment

by:PeterBaileyUk
ID: 40389703
I have another question but will post a new question
0
 
LVL 9

Expert Comment

by:Rowby Goren
ID: 40391188
Is the mp3 playing ok now?
0
 

Author Comment

by:PeterBaileyUk
ID: 40391642
yes
0
 
LVL 9

Expert Comment

by:Rowby Goren
ID: 40394421
Great!
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

Here is a tutorial for making your own Joomla templates. Note before reading, you should have some existing knowledge of web development using HTML and CSS. Design Layout: Design your template in a graphics program like Adobe PhotoShop or Corel…
Since I am currently running into this issue right now as I type this, I though I would share my experiences with moving a ModX Revolution site from one server to another.  It is not an easy task, but can be accomplished rather easily. The first …
In this video, Percona Director of Solution Engineering Jon Tobin discusses the function and features of Percona Server for MongoDB. How Percona can help Percona can help you determine if Percona Server for MongoDB is the right solution for …
Want to learn how to record your desktop screen without having to use an outside camera. Click on this video and learn how to use the cool google extension called "Screencastify"! Step 1: Open a new google tab Step 2: Go to the left hand upper corn…

719 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