Joomla how to click graphic image and go to url

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
PeterBaileyUkAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
Rowby GorenConnect With a Mentor Commented:
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
 
Rowby GorenCommented:
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
 
PeterBaileyUkAuthor Commented:
where do i store the mp3? in any particular directory
0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

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

 
PeterBaileyUkAuthor Commented:
can the index.html be blank? ive not heard of that before.
0
 
PeterBaileyUkAuthor Commented:
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
 
PeterBaileyUkAuthor Commented:
I have another question but will post a new question
0
 
Rowby GorenCommented:
Is the mp3 playing ok now?
0
 
PeterBaileyUkAuthor Commented:
yes
0
 
Rowby GorenCommented:
Great!
0
All Courses

From novice to tech pro — start learning today.