Solved

Joomla how to click graphic image and go to url

Posted on 2014-10-16
9
282 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 500 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
Independent Software Vendors: 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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

What you will need: Any version of Photoshop or similar product (examples in Photoshop) Internet Access FTP Access to your joomla install or ability to upload images within joomla administrator backend Create Image: Lets start off with cre…
Have you ever wanted to use that sweet jQuery gallery plugin on your Joomla site but couldn't get it working due to jQuery conflicts or your lack of knowledge about what's under the Joomla hood? This article will step you through the process of impl…
Michael from AdRem Software outlines event notifications and Automatic Corrective Actions in network monitoring. Automatic Corrective Actions are scripts, which can automatically run upon discovery of a certain undesirable condition in your network.…
This is my first video review of Microsoft Bookings, I will be doing a part two with a bit more information, but wanted to get this out to you folks.

615 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