Member Avatar for satimis

Hi folks,

I have an icon WELCOME2.gif downloaded on /home/satimis/html/ folder. But I can't make it to work on my simple homepage. What line shall I enter on /home/satimis/html/myhomepage.html file?

I tried something like <A HREF="file:///home/satimis/html/WELCOME2.gif">WELCOME</A>
etc.

It can't work. Only the word WELCOME displayed on the homepage. Please advise. TIA


On browser URL box;
file:///home/satimis/html/WELCOME2.gif

displaying it and working.


Furthermore how to control its rotation speed and the size of this icon w/o re-edit it on graphic software.


B.R.
satimis

  • 4 Contributors
  • 13 Replies
  • 188 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by satimis

Dani AI

Generated

Good progress — already solved the basic display by keeping the GIF in the same folder as the HTML, and the thread answers from , and cover the essentials (image vs link, and filesystem vs webserver). A quick clarification: file:// URLs are local-only and behave differently from HTTP(S) when you publish the page, so switch to relative or server-root URLs once you move the files to /var/www or a hosted site. (rfc-editor.org)

To change size without re-editing the GIF, let the browser scale it (this preserves the original file and is fast). Use responsive sizing so the image keeps its aspect ratio and doesn’t overflow its container — for example apply a rule that constrains the image to its container and lets height scale automatically. For higher-DPI displays, serve higher-resolution variants and let the browser pick the best one (srcset / sizes). (developer.mozilla.org)

Animation control: the GIF’s timing is part of the GIF frames (Graphic Control Extension), so HTML/CSS can’t slow or speed playback — you must re-encode the animation. For CLI or server-side fixes prefer tools that preserve frames: gifsicle is lightweight and can change delays and optimize animations; ImageMagick can coalesce/modify frames and re-optimize. Avoid using plain GD for animated GIFs: imagecreatefromgif() returns only the first frame, so GD will strip animation unless you handle frames yourself. (en.wikipedia.org)

Practical checklist: keep originals, test in multiple browsers, include meaningful alt text, use CSS for layout/size, and if you need a full favicon setup (many sizes + metadata) use a generator that produces the right files/markup for modern platforms. These steps will let the icon display, scale, and (if needed) be re-encoded safely without guessing at causes. (developer.mozilla.org)

Recommended Answers

All 13 Replies

Member Avatar for ShawnCplus

What do you want it to do? You didn't really explain that.
To have an image in a page you do <img src='image location' alt='If it doesn't show up' /> for a favicon it's <link rel='shortcut icon' href='image location' type='image/(mimetype)' />

Member Avatar for plgriffith

Is this page on the internet, or are you viewing it directly from your filesystem? If it's on the internet, then telling the page where the file is on your home computer doesn't do any good. Also, double check to make sure that the path you entered is a working path.

Member Avatar for satimis

What do you want it to do? You didn't really explain that.
To have an image in a page you do <img src='image location' alt='If it doesn't show up' />

Thanks for your advice.

The icon works now. It is not necessary providing path to the icon which is retained on the same folder/directory with the .html file.

for a favicon it's <link rel='shortcut icon' href='image location' type='image/(mimetype)' />

This is new to me. Just googling on it a while but still NOT very clear how to make it. Can you shed me some light? TIA


B.R.
satimis

Member Avatar for satimis

Is this page on the internet, or are you viewing it directly from your filesystem? If it's on the internet, then telling the page where the file is on your home computer doesn't do any good. Also, double check to make sure that the path you entered is a working path.

Thanks for your advice.

The icon is on the same folder/directory with the .html file, no path being necessary.

I'm now testing the webpage on the filesystem. After finish I'll hoist it on my Web Server. This is my first time after >10 years building a homepage, a very simple one. I did my work on text editor with coding.

Regarding graphics, can HTML coding works on it, such as blurring, shading, etc. on characters without editing the same on graphic editing software. Although I did lot of graphic editing in the past but it is time consuming. I have GIMP running on workstation including some other graphic editing software on Open Source. Could you please shed me some light? TIA


B.R.
satimis

Member Avatar for ShawnCplus

Well HTML isn't a programming language so, no you can't use HTML to do that. PHP has a pretty powerful library (the GD library) to work with images however.

Member Avatar for satimis

Well HTML isn't a programming language so, no you can't use HTML to do that. PHP has a pretty powerful library (the GD library) to work with images however.

Thanks for your advice.

PHP is NOT new to me but my knowledge on it is limited to building Web Server/LAMP server, NOT on graphics.

Just googling a while found follows;

Image Functions
http://hk.php.net/gd

GD Graphics Library
http://www.boutell.com/gd/

Smart Image Resizing while Preserving Transparency With PHP and GD Library

Image manipulation with PHP & the GD library, Part 2
http://www.phpit.net/article/image-manipulation-php-gd-part2/

Image Reflections in PHP

GD Graphics Library
http://en.wikipedia.org/wiki/GD_Graphics_Library


I'll take time going through them. Hoping that it is NOT difficult to learn. Otherwise better for me going back to graphic editing with software. At least I have experience.


I build webpage for myself NOT as profession. I only need a simple webpage introducing techical articles, no vedio, no music, etc. However I'm interested on coding NOT with mouse clicking around on screen. I may take time to learn PHP on graphic.

Thanks again for your suggestion.


B.R.
satimis

Member Avatar for satimis

What do you want it to do? You didn't really explain that.
To have an image in a page you do <img src='image location' alt='If it doesn't show up' />

I got it done. The icon is working. Thanks

for a favicon it's <link rel='shortcut icon' href='image location' type='image/(mimetype)' />

Member Avatar for MidiMagic

Put the image tag between the a tags.

<a href="page.htm"><img src="pic.gif" /></a>
Member Avatar for satimis

Put the image tag between the a tags.

<a href="page.htm"><img src="pic.gif" /></a>

Thanks for your advice.


I put following line on my single_page homepage, a file,

<p>
<img src="image.gif" height="xxx" width="yyy">
</p>

name the file "index.html" and put the file on /var/www/index.html


Then it works. The homepage can be visited on online proxy server with "https://domain.com"


What will be the difference between your suggestion;

<a href="page.htm"><img src="pic.gif" /></a>

and my line? TIA


B.R.
satimis

Member Avatar for MidiMagic

It makes the image clickable as a link.

It places the image where the word "welcome" is in your first example.

In

<a href="page.htm"><img src="pic.gif" /></a>

replace page.htm with the name of the web page you want the icon to link to.

replace pic.gif with the name of your icon.

You can't change the attributes of the icon animation (speed, etc) without making a new .gif image for each set of attributes. This requires an animation editor.

Member Avatar for satimis

Hi MidiMagic,


Thanks for your advice.

It makes the image clickable as a link.

It places the image where the word "welcome" is in your first example.

In

<a href="page.htm"><img src="pic.gif" /></a>

replace page.htm with the name of the web page you want the icon to link to.

replace pic.gif with the name of your icon.

If I need the icon, say "pic.gif" clickable, I need;

<a href="page.htm"><img src="pic.gif" /></a>

the icon is on the same folder/directory of the web page, say "page.htm".


If I don't need the icon clickable and it is on the same folder/dir of the current webpage, I only need;

<img src="pic.gif" />


If I'm wrong please correct me. TIA

You can't change the attributes of the icon animation (speed, etc) without making a new .gif image for each set of attributes. This requires an animation editor.

Yes, I did a lot in the past. It requires a small software decompressing the .gif image into frames first, adding/reducing frame, increasing/reducing the speed, etc.

I think the animation editor is available on Open Source. I can find it out later. But I wonder to know whether a java/php script can do the job instead of editing the .gif image?


B.R.
satimis

Member Avatar for MidiMagic

Good. You have it right.

Member Avatar for satimis

Good. You have it right.

Thanks


satimis

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.