8
\$\begingroup\$

I have just started learning coding and am trying to clean up a website that I am making. Everything is functional, but I imagine there is a better way write everything that is there, because a good chunk of it is repeated each time (the part with mouseover and mouseout) Is there a way to create a command like mouseover that applies to all images/buttons?

<div class="portfolioFilter">
   
   <p style="text-align: center;">
    <a href="#" data-filter="*" class="current"><img src="https://docs.google.com/drawings/d/1wK8ruJOkmgUaadrdB-fhBA2z-2I4EL5Yvf2nK68xpxU/pub?w=40&h=40" alt="image"
onmouseover="this.src='https://docs.google.com/drawings/d/1Sb4sO71xOTgg3nyfJ1PmbqAC_ucTDsEqDm2CiZFyDA8/pub?w=40&h=40';"
    onmouseout="this.src='https://docs.google.com/drawings/d/1wK8ruJOkmgUaadrdB-fhBA2z-2I4EL5Yvf2nK68xpxU/pub?w=40&h=40';"></a>

<a href="#" data-filter=".MJ"><img src="https://docs.google.com/drawings/d/1MAeTP02X9cQrGoTnCZX_nF2l7xksiWjYb30drGhuspM/pub?w=40&h=40" alt="image"
    onmouseover="this.src='https://docs.google.com/drawings/d/1Sb4sO71xOTgg3nyfJ1PmbqAC_ucTDsEqDm2CiZFyDA8/pub?w=40&h=40';"
    onmouseout="this.src='https://docs.google.com/drawings/d/1MAeTP02X9cQrGoTnCZX_nF2l7xksiWjYb30drGhuspM/pub?w=40&h=40';"></a>
    
<a href="#" data-filter=".1"><img src="https://docs.google.com/drawings/d/1KdfLMuWGRdzjh_5Yqtmct_l_NulVui7gxZJ3IGTgpaQ/pub?w=40&h=40" alt="image"
    onmouseover="this.src='https://docs.google.com/drawings/d/1Sb4sO71xOTgg3nyfJ1PmbqAC_ucTDsEqDm2CiZFyDA8/pub?w=40&h=40';"
    onmouseout="this.src='https://docs.google.com/drawings/d/1KdfLMuWGRdzjh_5Yqtmct_l_NulVui7gxZJ3IGTgpaQ/pub?w=40&h=40';"></a>

<a href="#" data-filter=".2"><img src="https://docs.google.com/drawings/d/184ePlol0z8sSK0xIrpJVoyIR8RpiFtLUwmHT_6J1KsU/pub?w=40&h=40" alt="image"
    onmouseover="this.src='https://docs.google.com/drawings/d/1Sb4sO71xOTgg3nyfJ1PmbqAC_ucTDsEqDm2CiZFyDA8/pub?w=40&h=40';"
    onmouseout="this.src='https://docs.google.com/drawings/d/184ePlol0z8sSK0xIrpJVoyIR8RpiFtLUwmHT_6J1KsU/pub?w=40&h=40';"></a>

<a href="#" data-filter=".3"><img src="https://docs.google.com/drawings/d/1fPBVg5ER1j6RrIX4byEwkBkVQuoJacbVAV1b67vfZOI/pub?w=40&h=40" alt="image" 
    onmouseover="this.src='https://docs.google.com/drawings/d/1Sb4sO71xOTgg3nyfJ1PmbqAC_ucTDsEqDm2CiZFyDA8/pub?w=40&h=40';"
    onmouseout="this.src='https://docs.google.com/drawings/d/1fPBVg5ER1j6RrIX4byEwkBkVQuoJacbVAV1b67vfZOI/pub?w=40&h=40';"></a>
    
<a href="#" data-filter=".4"><img src="https://docs.google.com/drawings/d/145o3U6239DLj_P5NJliHWt9opoejc05eGrLs0QK-Pr4/pub?w=40&h=40" alt="image" onmouseover="this.src='https://docs.google.com/drawings/d/1Sb4sO71xOTgg3nyfJ1PmbqAC_ucTDsEqDm2CiZFyDA8/pub?w=40&h=40';"
    onmouseout="this.src='https://docs.google.com/drawings/d/145o3U6239DLj_P5NJliHWt9opoejc05eGrLs0QK-Pr4/pub?w=40&h=40';"></a>
    
<a href="#" data-filter=".5"><img src="https://docs.google.com/drawings/d/1fZUg-gh6itL3lapF88bgATtAMbd5788Igcq7YYfNL74/pub?w=40&h=40" alt="image" onmouseover="this.src='https://docs.google.com/drawings/d/1Sb4sO71xOTgg3nyfJ1PmbqAC_ucTDsEqDm2CiZFyDA8/pub?w=40&h=40';"
    onmouseout="this.src='https://docs.google.com/drawings/d/1fZUg-gh6itL3lapF88bgATtAMbd5788Igcq7YYfNL74/pub?w=40&h=40';"></a>
    
<a href="#" data-filter=".6"><img src="https://docs.google.com/drawings/d/157JSA7Xjcm9GHIEOMXZYpxOWHt0nlQWij_aVy-YRWbg/pub?w=40&h=40" alt="image" onmouseover="this.src='https://docs.google.com/drawings/d/1Sb4sO71xOTgg3nyfJ1PmbqAC_ucTDsEqDm2CiZFyDA8/pub?w=40&h=40';"
    onmouseout="this.src='https://docs.google.com/drawings/d/157JSA7Xjcm9GHIEOMXZYpxOWHt0nlQWij_aVy-YRWbg/pub?w=40&h=40';"></a>
    
<a href="#" data-filter=".7"><img src="https://docs.google.com/drawings/d/1XGCLM_jvN2oVWolc7_kCVYXn8AZlJeRjpTaTRwcRA9A/pub?w=40&h=40" alt="image" onmouseover="this.src='https://docs.google.com/drawings/d/1Sb4sO71xOTgg3nyfJ1PmbqAC_ucTDsEqDm2CiZFyDA8/pub?w=40&h=40';"
    onmouseout="this.src='https://docs.google.com/drawings/d/1XGCLM_jvN2oVWolc7_kCVYXn8AZlJeRjpTaTRwcRA9A/pub?w=40&h=40';"></a>
    
<a href="#" data-filter=".8"><img src="https://docs.google.com/drawings/d/1yeJtaOPxVcajcSi4_47RlwxY9eZUWIOY4zUy5_nRTYI/pub?w=40&h=40" alt="image" onmouseover="this.src='https://docs.google.com/drawings/d/1Sb4sO71xOTgg3nyfJ1PmbqAC_ucTDsEqDm2CiZFyDA8/pub?w=40&h=40';"
    onmouseout="this.src='https://docs.google.com/drawings/d/1yeJtaOPxVcajcSi4_47RlwxY9eZUWIOY4zUy5_nRTYI/pub?w=40&h=40';"></a>
    
<a href="#" data-filter=".9"><img src="https://docs.google.com/drawings/d/1czPnvn4MAOpRJ45qx6qi5WQndxzyBqK302SuenVHlKA/pub?w=40&h=40" alt="image" onmouseover="this.src='https://docs.google.com/drawings/d/1Sb4sO71xOTgg3nyfJ1PmbqAC_ucTDsEqDm2CiZFyDA8/pub?w=40&h=40';"
    onmouseout="this.src='https://docs.google.com/drawings/d/1czPnvn4MAOpRJ45qx6qi5WQndxzyBqK302SuenVHlKA/pub?w=40&h=40';"></a>

<a href="#" data-filter=".10"><img src="https://docs.google.com/drawings/d/1GBUL9KuiebtzvpZwO4c9cOCr-9qry7bXc91UaJK6eRQ/pub?w=40&h=40" alt="image" onmouseover="this.src='https://docs.google.com/drawings/d/1Sb4sO71xOTgg3nyfJ1PmbqAC_ucTDsEqDm2CiZFyDA8/pub?w=40&h=40';"
    onmouseout="this.src='https://docs.google.com/drawings/d/1GBUL9KuiebtzvpZwO4c9cOCr-9qry7bXc91UaJK6eRQ/pub?w=40&h=40';"></a>

<a href="#" data-filter=".11"><img src="https://docs.google.com/drawings/d/1L1wfQWtHGsFsnWMWkTJK1qAKq7jt1JgiWiGCobPQ46E/pub?w=40&h=40" alt="image" onmouseover="this.src='https://docs.google.com/drawings/d/1Sb4sO71xOTgg3nyfJ1PmbqAC_ucTDsEqDm2CiZFyDA8/pub?w=40&h=40';"
    onmouseout="this.src='https://docs.google.com/drawings/d/1L1wfQWtHGsFsnWMWkTJK1qAKq7jt1JgiWiGCobPQ46E/pub?w=40&h=40';"></a>

<a href="#" data-filter=".12"><img src="https://docs.google.com/drawings/d/1IcgefHKcMCxEs6ZUjpVhisnxLE9hZ92zZKqLyy597W4/pub?w=40&h=40" alt="image" onmouseover="this.src='https://docs.google.com/drawings/d/1Sb4sO71xOTgg3nyfJ1PmbqAC_ucTDsEqDm2CiZFyDA8/pub?w=40&h=40';"
    onmouseout="this.src='https://docs.google.com/drawings/d/1IcgefHKcMCxEs6ZUjpVhisnxLE9hZ92zZKqLyy597W4/pub?w=40&h=40';"></a>
</p>
</div>

\$\endgroup\$
  • \$\begingroup\$ The initial load seems to be slow, I wonder if that's because the images are out on google docs. \$\endgroup\$ – RubberDuck Apr 2 '15 at 19:02
  • 1
    \$\begingroup\$ Not sure why it seems to be slow, they seem to pop up quickly for me, but it could because it's my account google account... here is the website: joetnick.weebly.com/maths.html \$\endgroup\$ – Nicholas Chauvin nxchauvin Apr 2 '15 at 19:07
  • 1
    \$\begingroup\$ Why would you host images off-site via Google Docs rather than on your own domain? \$\endgroup\$ – 200_success Apr 2 '15 at 19:36
  • \$\begingroup\$ Disconnect tells me that site makes 21 requests to Google that use 200 KB of bandwidth. \$\endgroup\$ – EMBLEM Apr 3 '15 at 1:19
11
\$\begingroup\$

You can actually do this entirely in CSS with no need for JavaScript. You just have to switch to using background-image instead of an image within the anchor and apply a unique class (or id) to each element to target them in your CSS.

.button {
  display: inline-block;
  width: 40px;
  height: 40px;
}
.star {
  background-image: url(https://docs.google.com/drawings/d/1wK8ruJOkmgUaadrdB-fhBA2z-2I4EL5Yvf2nK68xpxU/pub?w=40&h=40);
}
.mj {
  background-image: url(https://docs.google.com/drawings/d/1MAeTP02X9cQrGoTnCZX_nF2l7xksiWjYb30drGhuspM/pub?w=40&h=40)
}
.one {
  background-image: url(https://docs.google.com/drawings/d/1KdfLMuWGRdzjh_5Yqtmct_l_NulVui7gxZJ3IGTgpaQ/pub?w=40&h=40);
}
.button:hover {
  background-image: url(https://docs.google.com/drawings/d/1Sb4sO71xOTgg3nyfJ1PmbqAC_ucTDsEqDm2CiZFyDA8/pub?w=40&h=40);
}
<div class="portfolioFilter">

  <p style="text-align: center;">
    <a href="#" data-filter="*" class="button star current"></a>
    <a href="#" data-filter=".MJ" class="button mj"></a>
    <a href="#" data-filter=".1" class="button one"></a>
  </p>
</div>

\$\endgroup\$
10
\$\begingroup\$

You shouldn't be using images for text, nor should you be using JavaScript at all.

The images aren't semantically relevant; they are just for styling. By using text, you'll make your site workable on text-only devices, as well as screen readers. Furthermore, it's actually easier to maintain your website if it's HTML text, rather than text that has been burned into 14 images. You just need two background images:

Blank circle: Blank circle          Flower: Flower in circle

Then, the styling and hover effect should be done using just CSS.

div.portfolioFilter {
    text-align: center;
    line-height: 40px;
}

div.portfolioFilter a {
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    height: 40px;
    background-image: url(//i.stack.imgur.com/XJ2EC.png); /* Blank circle */
    color: rgb(214,79,83);
    text-decoration: none;
    font-size: 24px;
    font-family: Helvetica, sans-serif;
}
div.portfolioFilter a:hover {
    background-image: url(//i.stack.imgur.com/odFkQ.png); /* Flower */
    color: transparent;
}
div.portfolioFilter a[data-filter="*"],
div.portfolioFilter a[data-filter=".MJ"] {
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
}
<div class="portfolioFilter">
    <a href="#" data-filter="*" class="current">Tout</a>
    <a href="#" data-filter=".MJ">M/J</a>
    <a href="#" data-filter=".1">1</a>
    <a href="#" data-filter=".2">2</a>
    <a href="#" data-filter=".3">3</a>
    <a href="#" data-filter=".4">4</a>
    <a href="#" data-filter=".5">5</a>
    <a href="#" data-filter=".6">6</a>
    <a href="#" data-filter=".7">7</a>
    <a href="#" data-filter=".8">8</a>
    <a href="#" data-filter=".9">9</a>
    <a href="#" data-filter=".10">10</a>
    <a href="#" data-filter=".11">11</a>
    <a href="#" data-filter=".12">12</a>
</div>

\$\endgroup\$
3
\$\begingroup\$

This is just an additional comment as the two previous have done well.

Encoding small images with base64

There is a misconception that using base 64 encoded images in HTML and CSS is inefficient.

Not True.

The general conscientious is the because base 64 adds about 15% more bytes to the image. It does before the HTML is gzip encoded.

I created two html pages. I used just one div with the .star{background-image:

One with the Google link to the image (starG.html), and
one with the image in the CSS using base 64 encoding (star64.html).

I tested both pages on webpagetest.org

star64: 0.4KB Less bytes, and 243% faster than startG.

starG: Both HTML and PNG:

Bytes In (downloaded): 2.1 KB
Total Load Time 0.732s

star64:

Bytes In (downloaded): 1.7 KB
Total Load Time:  0.301s

Below are actual numbers from webpagetest.org.

when the content download is less than 1ms webpagetest reports nothing. The numbers for these two figure I got from my Browser.


starG.html

starG

NOTE: 3rd Line above is favicon.ico

URL: starG.html
Start Offset: 0.102 s
DNS Lookup: 40 ms
Initial Connection: 62 ms
Time to First Byte: 68 ms
Content Download: ms
Bytes In (downloaded): 0.5 KB

 URL: https://docs.google.com/drawings/d/1wK8ruJOkmgUaadrdB-fhBA2z-2I4EL5Yvf2nK68xpxU/pub?w=40&h=40
Start Offset: 0.330 s
DNS Lookup: 31 ms
Initial Connection: 34 ms
SSL Negotiation: 62 ms
Time to First Byte: 309 ms
Content Download: 5 ms
Bytes In (downloaded): 2.1 KB
Total Load Time 0.732s

NOTE: SSL added 62ms
This is actually very fast SSL negotiation. I have a client on a GoDaddy VPS, and typical SSL is well over 500ms.

Both HTML and PNG: Total Bytes In (downloaded): 2.1 KB


star64.html

star64

NOTE: 2nd Line above is favicon.ico

URL: star64.html
Start Offset: 0.104 s
DNS Lookup: 40 ms
Initial Connection: 64 ms
Time to First Byte: 68 ms
Content Download: 0.425 ms
Bytes In (downloaded): 1.7 KB
Total Load Time:  0.301s

HTML starG.html

<!DOCTYPE html>
<html lang="en"><head><title>Star</title>
<style type="text/css">
.star {height:40px;width:40px;
  background-image: url(https://docs.google.com/drawings/d/1wK8ruJOkmgUaadrdB-fhBA2z-2I4EL5Yvf2nK68xpxU/pub?w=40&h=40);}

</style></head><body><div class="star"></div></body></html>

HTML star64.html

<!DOCTYPE html>
<html lang="en"><head><title>Star</title>
<style type="text/css">
.star {width:40px;height:40px;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAEjklEQVR42sVYO2hUWRieIoWFhYWFxRZbbGFpYWkR2GKLLbfYIkUKQRvBQiRFCCsoIqQQCSKEwIqKFhbBRsENmUJCZvNkJpm8J5nNvN9iYkzm4dnvO3POeHLndWdyb3Lh59577rn/+c7/Pr/H48C1uLj489zc3LX5+fk/ce8nLSws/IrxC56zuILB4HmA6QO9AZg9kGhBi6CBmZmZS64D4yJY7BnomwkCkjpcXl4+XFtbE+vr66TK0tLSAb6VjHn8Z5ibcxyY1+s9RymACnpBABLhcFhkMhlRKBQaUj6fF9FoVKyurpoSjUDyvzkGDgwvg1b1AlwsnU43BdWMksmkgFRNoPdPDI6GDkafyTAQCIh4PN4xMCttb28LSFCCxH0c2unpCtzs7Ox1MCmTEW2L6jopOE3cKDYvQeL+b8d2SRvR4EKhkGPATKKZwLm0uidtS1LZ3D5/pDrcANcIJITyyk7AvYDJW1qtboIznUfbJMzqZjvp3edEepuTNteOIpGIluIRs1KrdCUDMHd1WuA0McArkBPNvPYlJ3DiaYMj5XK5mmfXBXKfz/eTcvnvrTKD28TMpLx62mp7t3WWOCtwOjVqr4awrpoAvRyksXbENJUSBYclvrW1pT36sRlaSkBc4Q5SExMifONGQ4qPjlbtZWNDRB89qo1Hh4dFbnOz+g2x05xL0jx5N/+zUgbhJpFIaDXvaOldU9XJEZllg0GRfPtW0u7AgPxRv6enpkQeaeq/u3dF+NYtkXz3TiTHx+Uz51Ka7QCSyCvx4oUci9y7V+OfU4kBTlJWIC96VBXcMDDr3Zpjqffvq6A/fPgRbAFUA2gHsOa1DeZpQm7+rgD+Tgne4Qt1bwdgfGxMjlHNeiyLwC4Xe/7cEYA6JvLoQAn+1SzvNgQIhhKgMd9czAmAG9i8cpTrHlUp25agtp2s3/8j6ft8cizx+rUjABHuvqqA3UcJ9ikbPLQDMDM9Xcc49vRpFTRiWB4lvvZsq1nQS+0AhMN+URLsZYrrVQXCVzsATUC7Q0Nid3BQPnPMagb00MiDB9Xnhw9FAenMDkCEvn0lwV+o4ovqpWitYBhCGjHgQlRXbGREUnpy8tjifKaXy+9Pnkg+MqibWQOSJu/Ux4/HxrPZLLFUWLjUKm28fOoqk7hbev1Tl4tXVlaOzhogMBTqildVzZSAutTNkdIpUuotEiAxWSuav5UUi2cFEAH6swrQ483aGlK8sVjs1MFRc+okWZLe2+RMclv1WoqnWbgyegQCgZyS3rNWPZgeXRv6/f5SzgwdLhKSRF73bWQF0661hklLKniX3Qa5s7PzRYHbg5ld6aTNFlHqLrtxyqNaURTUumUIK3901P6gm+OnWXU+qPBA49RZmeEE2tE2tyeLgi77gj34eUTvEnZZOUm2obmEQqF9HetAiWOHo24vih/MNg2gZTaV7KieUmc3CzGOwA4Mlb50tC2sPLzfBKpstATHKrIKJmgWvqwt8X6AsonqO7L0rL22naFboGxs8lhoBduqkc7K3VVgrdp1qhPbD9CD6ggxoN5763Jqh9f/Fogz088gy40AAAAASUVORK5CYII=');}
</style></head><body><div class="star"></div></body></html>

star64 as Snippet:
Both starG and star64 render exactly the same.

.star {width:40px;height:40px;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAEjklEQVR42sVYO2hUWRieIoWFhYWFxRZbbGFpYWkR2GKLLbfYIkUKQRvBQiRFCCsoIqQQCSKEwIqKFhbBRsENmUJCZvNkJpm8J5nNvN9iYkzm4dnvO3POeHLndWdyb3Lh59577rn/+c7/Pr/H48C1uLj489zc3LX5+fk/ce8nLSws/IrxC56zuILB4HmA6QO9AZg9kGhBi6CBmZmZS64D4yJY7BnomwkCkjpcXl4+XFtbE+vr66TK0tLSAb6VjHn8Z5ibcxyY1+s9RymACnpBABLhcFhkMhlRKBQaUj6fF9FoVKyurpoSjUDyvzkGDgwvg1b1AlwsnU43BdWMksmkgFRNoPdPDI6GDkafyTAQCIh4PN4xMCttb28LSFCCxH0c2unpCtzs7Ox1MCmTEW2L6jopOE3cKDYvQeL+b8d2SRvR4EKhkGPATKKZwLm0uidtS1LZ3D5/pDrcANcIJITyyk7AvYDJW1qtboIznUfbJMzqZjvp3edEepuTNteOIpGIluIRs1KrdCUDMHd1WuA0McArkBPNvPYlJ3DiaYMj5XK5mmfXBXKfz/eTcvnvrTKD28TMpLx62mp7t3WWOCtwOjVqr4awrpoAvRyksXbENJUSBYclvrW1pT36sRlaSkBc4Q5SExMifONGQ4qPjlbtZWNDRB89qo1Hh4dFbnOz+g2x05xL0jx5N/+zUgbhJpFIaDXvaOldU9XJEZllg0GRfPtW0u7AgPxRv6enpkQeaeq/u3dF+NYtkXz3TiTHx+Uz51Ka7QCSyCvx4oUci9y7V+OfU4kBTlJWIC96VBXcMDDr3Zpjqffvq6A/fPgRbAFUA2gHsOa1DeZpQm7+rgD+Tgne4Qt1bwdgfGxMjlHNeiyLwC4Xe/7cEYA6JvLoQAn+1SzvNgQIhhKgMd9czAmAG9i8cpTrHlUp25agtp2s3/8j6ft8cizx+rUjABHuvqqA3UcJ9ikbPLQDMDM9Xcc49vRpFTRiWB4lvvZsq1nQS+0AhMN+URLsZYrrVQXCVzsATUC7Q0Nid3BQPnPMagb00MiDB9Xnhw9FAenMDkCEvn0lwV+o4ovqpWitYBhCGjHgQlRXbGREUnpy8tjifKaXy+9Pnkg+MqibWQOSJu/Ux4/HxrPZLLFUWLjUKm28fOoqk7hbev1Tl4tXVlaOzhogMBTqildVzZSAutTNkdIpUuotEiAxWSuav5UUi2cFEAH6swrQ483aGlK8sVjs1MFRc+okWZLe2+RMclv1WoqnWbgyegQCgZyS3rNWPZgeXRv6/f5SzgwdLhKSRF73bWQF0661hklLKniX3Qa5s7PzRYHbg5ld6aTNFlHqLrtxyqNaURTUumUIK3901P6gm+OnWXU+qPBA49RZmeEE2tE2tyeLgi77gj34eUTvEnZZOUm2obmEQqF9HetAiWOHo24vih/MNg2gZTaV7KieUmc3CzGOwA4Mlb50tC2sPLzfBKpstATHKrIKJmgWvqwt8X6AsonqO7L0rL22naFboGxs8lhoBduqkc7K3VVgrdp1qhPbD9CD6ggxoN5763Jqh9f/Fogz088gy40AAAAASUVORK5CYII=');}
<div class="star"></div>

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.