Create Websites with CHEETAH

The most important design elements at a glance (19)

Use HTML-snippets
 

Snippets" are small functional HTML code snippets that are inserted inline into a code page and have a certain functionality. Under "Cheetah" the already known iFrame / HTML - element is used for this. Here you can enter native HTML code, which is then executed in the web page accordingly. As an introductory example, a short code snippet is presented here, which causes Google Maps to generate directions to a specific location, where the starting point is Dresden-Klotzsche Airport. The directions are displayed in a new browser tab after clicking the "Expand Map" button:
 

< form action= "http://maps.google.com/maps" method="get"

               target="_blank" >

  < label for="saddr">Wohin willst Du?

  < input type="text" name="saddr" / >

  < input type="hidden" name="daddr" value="Flughafen

               Dresden (DRS), Flughafenstraße,

               Klotzsche Dresden" / >

  < input type="submit" value="Blende Karte auf" / >

< /form>

 

You must enter this code in the "Embed code" field in the "General settings" category of the iFrame / HTML element and additionally check the "Inline HTML" checkbox. The iFrame / HTML - element will then change its content

and in the preview you can then convince yourself of its functionality.
 

Note: At this point, of course, no course on HTML programming can be given now. So if you want to develop such "snippets" yourself, then you have no other choice than to deal with this markup language. There are many textbooks and specialized websites and online courses on the web. In this context, the following two reference sites are particularly recommended:
 

An HTML snippet usually consists of three parts: An HTML code, a style, which among other things determines the visual appearance and possibly JavaScript to ensure functionality.
 

Let's assume you want to show a photo on your website in a modally enlarged form as soon as you click on it with the mouse. Then the pure HTML code for this looks like this:
 

< img id="myImg" src="{ Link to the photo}"   alt="{Image titel}"  style="width:100%;max-width:300px" >

< div id="myModal" class="modal">

 < span class="close">×

 < img class="modal-content" id="img01" >

 < div id="caption">

< /div>

This code is responsible for displaying the image. Now follow the inline stylesheets to explicitly configure each named element.
 

First, we add a hover effect to the "myImg" image:
 

< style>

#myImg { border-radius: 5px; cursor: pointer; transition: 0.3s;

}

#myImg:hover {opacity: 0.7;}
 

In the preview, this effect ("graying out" of the image when the mouse is touched) can already be seen. Now follows the "formatting" of the modal content:
 

.modal-content { margin: auto; display: block; width: 80%; max-width: 700px;

}

#caption { margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px;

}

.modal-content, #caption { animation-name: zoom; animation-duration: 0.6s;

}

@keyframes zoom { from {transform:scale(0)} to {transform:scale(1)}

}

.close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold;

 transition: 0.3s;

}

.close:hover,

.close:focus { color: #bbb; text-decoration: none; cursor: pointer;

}

@media only screen and (max-width: 700px){

 .modal-content {

  width: 100%;

 }

}

Here now follows the block with the JavaScript program necessary for the function which ensures that a mouse click on the image also achieves the desired effect:
 

< script>

var modal = document.getElementById("myModal");

var img = document.getElementById("myImg");

var modalImg = document.getElementById("img01");

var captionText = document.getElementById("caption");

img.onclick = function(){ modal.style.display = "block"; modalImg.src = this.src; captionText.innerHTML = this.alt;

}

var span = document.getElementsByClassName("close")[0];

span.onclick = function() {  modal.style.display = "none";

}

< /script>
 

Note: You must adjust the size of the iFrame / HTML - container so that no scroll bars appear when the enlarged image is displayed (here 1000 x 1000 pixels).

TB Amazon