Information buttons - Nyt projekt
Title
Here I show some code that offers a button ( image ) to be shown in a fixed position to the right.
More "buttons" could be supplied.
I have chosen to show three different types.
The first is a telephone icon. When howered, an image with the icon and some text is shown. On mouse out, the initial image is replaced with a more discrete icon.
The next is an image showing a product. When hovered, the image is replaced with a gif that shows the product in different colors. On mouse out, the initial image is shown again.
The third is an image showing a product. When hovered, the image is replaced with the same product shown three times, but in different colors. On mouse out, the initial image is shown again.
If more than one image should be shown, then I think it will give the best impression if the images/buttons/icons was rectangular, and was stacked on top of each other.
This page is made loong, so it is possible to see the fixed-effect.
The images can be clicked and then a new tab is opened with the target.
Here is the code for the images shown
<style>
.rightbutton1 {
position: fixed;
right: 0px;
background-color: transparent;
top: 470px;
}
.rightbutton2 {
position: fixed;
right: 0px;
background-color: transparent;
top: 410px;
}
.rightbutton3 {
position: fixed;
right: 0px;
background-color: transparent;
top: 210px;
}
</style>
<div class="rightbutton1">
<a href="http://calendarforum.dk/" target="_blank">
<img src="http://www.bramminginfo.dk/brm02/files/Extraflame Serafina 03 60H.png" onmouseover="this.src='http://www.bramminginfo.dk/brm02/files/Extraflame Serafina 60H.png'" onmouseout="this.src='http://www.bramminginfo.dk/brm02/files/Extraflame Serafina 03 60H.png'"></a>
</a>
</div>
<div class="rightbutton2">
<a href="http://calendarforum.dk/" target="_blank">
<img src="http://www.bramminginfo.dk/brm02/files/Extraflame Serafina 03 60H.png" onmouseover="this.src='http://www.bramminginfo.dk/brm09/images/joris/JMSslideAnimated%20Extraflame%20Serafina%2060H.gif'" onmouseout="this.src='http://www.bramminginfo.dk/brm02/files/Extraflame Serafina 03 60H.png'"></a>
</a>
</div>
<div class="rightbutton3">
<a href="http://calendarforum.dk/" target="_blank">
<img src="http://eksempelsite.dk/images/telephone01.png" onmouseover="this.src='http://eksempelsite.dk/images/telephone02.png'" onmouseout="this.src='http://eksempelsite.dk/images/telephone03.png'"></a>
</a>
</div>
Just some text to make the page long.
Just some text to make the page long.
Just some text to make the page long.
