Coding an internet link, displaying an image

Projects Networking, Protocols, and Devices
1

I've been developing a fan controller for my solar air heater. I have the Arduino Uno + Seeeduino Ethernet Shield posting values on a simple web page I built using client.print html from my home connection. It all works pretty well so far allowing me to check on the panel from work. A couple things have me stumped however:

How would I go about setting up my page to display a clickable link from the Arduino? HTML should look something like this:
client.print(click this link);

but it doesn't work, neither can I find a solution.

Also, I'd like to display a simple icon sized image on the web interface based on the value of a variable. My thought was to upload the image to my photobucket account, then display the image by linking on my web interface via arduino.

I'm not sure where to start on this one.

Any help would be appreciated. Thank you,

2

You must put quotes around the string and escape the quotes inside the string. Like this:

client.print("<A HREF=\"http://somepagetoclickon.com\">click this link</A>");

The IMG tag should be the same.

3

You are the man. Thank you, it works perfectly. I'm embarrassed to say how much time I spent on that one.

4

EDITED FOR FULL IMAGE PATH
Alright at the risk of someone having to hold my hand through this whole thing.... a little more help please. I have a feeling it's a syntax problem, maybe not. I'm just learning html too, which doesn't make this any easier.

Thanks to SurferTim, I have a link correctly formatted on the Arduino based web server. The next step is I can't get an image to appear.

The image is on my Photobucket, who offers the following bit of HTML:
photo Fan-Spin.gif

I put the following HTML bit in notepad, opened it in Firefox and it works fine:

After a lot of research and trial and error, the following compiles in the Arduino, but displays nothing:
client.print("<img src="http://i250.photobucket.com/albums/gg256/spiral_72/Fan-Spin.gif>");

Could someone help please?

5

What is the entire link to that image? It is not this:

What does the "..." replace in the original link?

6

Alright I was being paranoid.

The full HTML from Photobucket is:
photo Fan-Spin.gif

The direct link is:

If it matters, the image is a three frame GIF animation, 64x64 pixels

I'll edit the code with a full path above.

7 
 client.print("<img src=\"http://i250.photobucket.com/albums/gg256/spiral_72/Fan-Spin.gif\">");

edit: Oops! Forgot the closing double quote.

8

Hmmm. Thank you, that's what I had verbatim. Maybe I have another problem or this won't work with Photobucket.

9

Look closely at the escaped double quotes at the end of the image url on mine.

// this is not the same...
client.print("<img src=\"http://i250.photobucket.com/albums/gg256/spiral_72/Fan-Spin.gif>");
//... as this:
client.print("<img src=\"http://i250.photobucket.com/albums/gg256/spiral_72/Fan-Spin.gif\">");
10

AH! I tried the code and replied before you edited.... or while you edited.

Man, how's that for service? Thank you so much for you help. I really did spend hours on this. It works perfectly!

11

I saw the missing escaped quote as I clicked the submit button. My bad.