Tag: image

Pubblicato il

How to set the css :.after size

It may happen that an image you chose for a css after content is too big. Therefore you need to resize it.

The following code doesn’t work:

yourelement::after {
  content: url(image.jpg);
  width: 10px;
}

You should use this, instead

yourelement::after{
    background-image: url(image);
    background-size: 10px 20px;
    display: inline-block;
    width: 10px; 
    height: 20px;
    content:"";
}

Pubblicato il

svg with external image embedded

All browsers have this limitation: they not allow to show an svg with an external image embedded, such as 

<image x="2" y="2" width="somewidth" height="someheight" xlink:href="myimage.jpg">

even though the image is in local.

For security reasons.

Pubblicato il

expansible image with image-map

We managed to add an image map to the on-click expansible image.

This is the code:

<style type="text/css">
img[usemap] { zoom: 12%;}
img[usemap]:focus {zoom: 50%;}
</style>
<map name="mymap">
  <area shape="rect" coords="1294,253,1420,434" title="mount" />
  <area shape="rect" coords="1709,296,1835,477" title="tree" />
</map>
<img tabindex="0" src="path-to/myimage" usemap="#mymap" />

The problem is that to close the expansed image you must click either on a map area or outside the image.

Pubblicato il

on-click expansible image

We were looking for the simplest possible solution to enlarge an image on click, without javascript and with the least amount of code possible.

a first attempt

At first we found the pseudo-class focus as a solution: with this css code img:focus and in html (inside the img tag) tabindex="0".

In this way, the image expanded on click, but to make it return to the initial size, it was necessary to click outside the enlarged image. As in the following example:

an important step

Therefore we had to add other code, so that we could return to the original, small, size, clicking inside the image. We had to use the input tag.

This is the result:

This is the code:

<style type="text/css">
input:checked + label > img {max-width: 200px; transform:scale(1.0); left: 0px;}
input {display: none;}
img {
    max-width: 200px;
    transition: all 1s;
    transition:transform 0.25s ease;
}

img:focus {
    max-width: none;
    transform:scale(2.8);
    position: relative;
    left: 5%;
    outline:0;
}
</style>
<p>This the result:</p>
<input type="checkbox" checked id="myimage" />
<label for="myimage">
<img tabindex="0" src="path-to-my-image/myimage.jpg" width="200px" />
</label>

fine tuning: adding an image map

We speak about this new feature in another article.

Pubblicato il

show “alt” attribute after an image

You can use a javascript, like this

<script type="text/javascript">
// img[style]').each(function(){
       $el = $(this);
       var style = $el.attr('style');
       $el.attr('style','');
       $el.parent().attr('style',style);
    }); //Moves the inline styles

      $("img").each(function(){
          var title = this.alt;
          $(this).after(''+ title +'');
      }); //Adds the dynamic captions.
 });
 //]]>
</script>

Pubblicato il

link, rather than embed images in odb file

Today I followed this way: link rather than embed the images, so that the odb file can remain of small size.
1. in edit view add a text box in your form and
2. convert it (replace with) to a image control
3. in normal view double click on the new box and select the image, which will not embedded, but linked.

with mysql

If you use a mysql database you can set the field as varchar (at least 150 char) and insert the location, such as http://localhost/your-path/yourfile.jpg.
Then you can add this field as data in the text box (as above).