Don't have an account yet? 
Forum Thread
Royal Tunnel Type Gifs Alt
Forum-Index → Suggestions → Royal Tunnel Type Gifs Alt
Posted: Wed, 28/02/2018 04:07 (6 Years ago)
) as text before the image is loadedExamples:
SVG: Which of these is a
-Pokémon?SVG advanced: Which of these is a
-Pokémon? (yes this is pure
text)HTML: Which of these is a
From here on this is directed to Riako
There are several ways to do this:
background text with svg, base64
Which of these is a <img
src="img/type_icons/dragon.gif" style="min-width:32px;
min-height:14px;
background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIxNCI+PHRleHQgeD0iMCIgeT0iMTEiIGZvbnQtc2l6ZT0iMTQiIGZpbGw9ImJsYWNrIiB0ZXh0TGVuZ3RoPSIzMiI+ZHJhZ29uPC90ZXh0Pjwvc3ZnPg==');"><b>-Pokémon</b>?
Advantages:Text will always be the same width as the image
Disadvantages:
Need a different "background-image" for every type
Note:
I will provide all base64 strings you need if prefering this option. The font can be changed obviously.
Using HTML + javascript
Which of these is a <img id="type1"
alt="dragon"><b>-Pokémon</b>?
<script>
var img = document.getElementById("type1");
var typeImg = new Image();
typeImg.onload = function() {
img.src = this.src;
}
typeImg.src = "https://pokeheroes.com/img/type_icons/dragon.gif";
</script>
Advantages:<script>
var img = document.getElementById("type1");
var typeImg = new Image();
typeImg.onload = function() {
img.src = this.src;
}
typeImg.src = "https://pokeheroes.com/img/type_icons/dragon.gif";
</script>
Pretty flexible (1 piece of code for all types)
Disadvantages:
There's the
Text doesn't have a fixed length so there will be some text shifting going on when the images are loaded.
Posted: Wed, 28/02/2018 04:22 (6 Years ago)
So many times I've failed because the image doesnt load.