Side 7 - test01

Title
Title
Gå til indhold
Category 1
Niveau 2
****   IMPORTANT -  In the examples you can copy the code directly to a html-object. BUT the path to the download HAS to be a path on your own server.
You can use full-path as shown here, or you can use relative path. The examples is tested to function in : Chrome, Firefox and Edge. *****
1
2
3
You can download a gpx-file_here

You can download a jpg-file_here
Code for 1

<a href="http://www.bramminginfo.dk/brm09/files/Zoo_sample.gpx" download>
 <img border="0" src="http://www.bramminginfo.dk/brm02/images/icon32-038_psa1yi3t.png" alt="W3Schools" width="70" height="70">
</a>

Code for 2

The button is animated when hovering.

<a href="http://www.bramminginfo.dk/brm09/files/Zoo_sample.gpx" download>
 <img src="http://www.bramminginfo.dk/brm09/images/downloadpng2.png"  onmouseover="this.src='http://www.bramminginfo.dk/brm09/images/downloadanimated.gif'" onmouseout="this.src='http://www.bramminginfo.dk/brm09/images/downloadpng.png'">
</a>

Code for 3

The "text links" is made very compact - but quick and dirty.

The code is here :
You can download a gpx-file_<a href="http://www.bramminginfo.dk/brm09/files/Zoo_sample.gpx" download>here</a>
<br><br>
You can download a jpg-file_<a href="http://www.bramminginfo.dk/brm09/files/Door.jpg" download>here</a>

Code for 4

The code for the button AND the text ( text is also clickable ) is pure html : no quick-and-dirty. The code is here :

<a href="http://www.bramminginfo.dk/brm09/files/Zoo_sample.gpx" download>
<img border="0" src="http://www.bramminginfo.dk/brm09/files/Download_1.png" alt="Download">___download a gpx file for tour 01</a><br><br>
<a href="http://www.bramminginfo.dk/brm09/files/Door.jpg" download>
<img border="0" src="http://www.bramminginfo.dk/brm09/files/Download_1.png" alt="Download">___download a jpg file for tour 01</a><br><br>
<a href="http://www.bramminginfo.dk/brm09/files/Zoo_sample.gpx" download>
<img border="0" src="http://www.bramminginfo.dk/brm09/files/Download_1.png" alt="Download">___download a gpx file for tour 02</a><br><br>
<a href="http://www.bramminginfo.dk/brm09/files/Door.jpg" download>
<img border="0" src="http://www.bramminginfo.dk/brm09/files/Download_1.png" alt="Download">___download a jpg file for tour 02</a><br>

Code for 5

This is the very clean and simple solution :

<a href="http://www.bramminginfo.dk/brm09/files/Zoo_sample.gpx" download>Click to download the tour01 gpx file</a>

--------------------------------------------------------------------------------------------------------------------------------------------

Each html object is given a grey background

The systems can be combined.



Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Tilbage til indhold