• 0

click on picture --> info pops up


Question

hey guys, im a complete noob when it comes to making websites...?

but i want to know, how do you have a site which would show some pictures... and if you click on a picture, you get presented with some text which is overlaid on top

how is this accomplished??

Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0

Not exactly clicking on the pic for text, but hovering over it will show text, this is a very old site I made in HTML - the code for the text popup is as follows:

--------

<a href="blacksmiths.jpg"><img src="blacksmiths2.jpg" border=0 height=250 width=250 alt="View of the Blacksmiths Shop"><p>

<a href="downmineshaft1.jpg"><img src="mineshaft2.jpg" border=0 width=250 height=250 alt="Mine ventilation shaft with drop of 240ft!">

<a href="photos8b.html"><img src="heritagecentre.jpg" border=0 height=250 width=250 alt="Displays and overview of Allenheads history"></p></a>

---------

Page the code is from:

http://www.risingsuncotts.fslife.co.uk/exploringvillage.html

Works best in IE

Link to comment
Share on other sites

  • 0

Sorry, in that code lies the entirety of my knowledge of HTML, lol - it was a long time ago and the only site I have made so hopefully someone else with a better understanding of it can help

Link to comment
Share on other sites

  • 0

There's a pretty nifty tutorial found here which utilises DIV tags and JS.

One advantage is that the visitor can then toggle text on/off simply by clicking image once more.

Link to comment
Share on other sites

  • 0

Not exactly clicking on the pic for text, but hovering over it will show text, this is a very old site I made in HTML - the code for the text popup is as follows:

--------

<a href="blacksmiths.jpg"><img src="blacksmiths2.jpg" border=0 height=250 width=250 alt="View of the Blacksmiths Shop"><p>

<a href="downmineshaft1.jpg"><img src="mineshaft2.jpg" border=0 width=250 height=250 alt="Mine ventilation shaft with drop of 240ft!">

<a href="photos8b.html"><img src="heritagecentre.jpg" border=0 height=250 width=250 alt="Displays and overview of Allenheads history"></p></a>

---------

Page the code is from:

http://www.risingsuncotts.fslife.co.uk/exploringvillage.html

Works best in IE

If you want text to show when hovering over an image, use title, not alt. The alt attribute is for displaying text when the image can not be loaded.

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.