HTML TEXT and superimposing an image on the text

samesale · Sep 15, 2003

I am trying to write statements in HTML to superimpose gip on the top of the text. I need help.

For example:

<html>
<head>
<title>test</title>
</head>
<body>
<h2>
What is your name?
<img src="image002.gif">
<img src="sold1.gif">
</body>
</html>

This program is supposed to superimpose imag002.gif on What is your name?

Any help will be appreciated.

dwarfthrower · Sep 15, 2003

If you superimpose a Graphic on Text, no-one will be able to read the text, do you mean to superimpose the Text on the graphic, so that the graphic becomes the background to the text?

Code:

<html>
<head>
<title>test</title>
<style type=&quot;text/css&quot;>
<!--
.bgImage {
	background-image: url(image002.gif);
	background-repeat: no-repeat;
}
-->
</style>
</head>
<body>
<h2>
<span class=&quot;bgImage&quot;>What is your name?</span>
<img src=&quot;sold1.gif&quot;>
</body>
</html>

_{Never be afraid to share your dreams with the world.

There's nothing the world loves more than the taste of really sweet dreams.}

samesale · Sep 15, 2003

Thank you. It worked and your suggestion makes sense and is appreciated.

samesale · Sep 15, 2003

I appreciate the suggestion. However, I would to like the background to cover more than one text line. Is there a way to do so?

My updated text is:

<html>
<head>
<title>test</title>
<style type="text/css">

</style>
</head>
<body>
<h2>
<span class="bgImage" >What is your name?<br>
What is your name?<br>
What is your name?<br>
What is your name?<br>
What is your name?<br>

</span>
</body>
</html>

clarkin · Sep 15, 2003

http://www.w3.org/TR/1998/REC-html40-19980424/struct/global.html#h-7.5.4

Generally use <span> for one liners and <div> for multi line blocks.

Posting code? Wrap it with code tags: [ignore]

Code:

[/ignore][code]CodeHere

[ignore][/code][/ignore].

BobbaFet · Sep 16, 2003

Remember that you could also use a table for that, I seem
to remember that you wouldnt need CSS then. Although it'll probably amount to the same amount of coding.

[bobafett]

BobbaFet [bobafett]

Everyone has a right to my opinion.
E-mail me at caswegkamp@hotmail.com

http://cwcon.50megs.com/

samesale · Sep 16, 2003

Thank for your help.

MuadDubby · Mar 2, 2004

Any idea if you can have text on top of an IMG instead of a background? The reason I need this is because I'm trying to make dynamic buttons where the image is static but the text always changes. I also need to trap the onMouseOver and onMouseOuit events for the IMG so I can change the button's face...

Any ideas?

Thx,

dwarfthrower · Mar 2, 2004

Yeah... you can extend upon my example above easily enough...

Define a number of classes using different images as the background

Code:

<style type="text/css">
<!--
.bgImage1 {
    background-image: url(image001.gif);
    background-repeat: no-repeat;
}
.bgImage2 {
    background-image: url(image002.gif);
    background-repeat: no-repeat;
}
-->
</style>

Then you can use the [tt]onmouseover[/tt] and [tt]onmouseout[/tt] events of the [tt]<span>[/tt] to change it's [tt]className[/tt] property.

A javascript example:

Code:

<script>
 function doMouseOver(objSpan){
  objSpan.className = "bgImage2";
 }
 function doMouseOut(objSpan){
  objSpan.className = "bgImage1";
 }
</script>
...
<span class="bgImage1"
      onmouseover="doMouseOver(this);"
      onmouseout="doMouseOut(this);">What is your name</span>

_{Never be afraid to share your dreams with the world.

There's nothing the world loves more than the taste of really sweet dreams.}

Check out Tek-Tips Australia New Zealand forum1155

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

HTML TEXT and superimposing an image on the text

samesale

Programmer

dwarfthrower

Programmer

samesale

Programmer

samesale

Programmer

clarkin

Programmer

BobbaFet

Programmer

samesale

Programmer

MuadDubby

Programmer

dwarfthrower

Programmer

Similar threads

Part and Inventory Search

Sponsor