php 或 js 怎么在图片上添加文字和图片，

JavaScript011

php 或 js 怎么在图片上添加文字和图片，,第1张

需要扩展GD库，例如：

<?php

$im

=

ImageCreate(70,350)

$white

=

ImageColorAllocate($im,255,255,255)

$black

=

ImageColorAllocate($im,0,0,0)

ImageTTFText($im,20,270,28,10,$black,'courbi','The

courier

TTF

font')

header('Content-Type:

image/png')

ImagePNG($im)

?>

会将文字竖排排列显示。至于楼主想要的效果，建议楼主先去找一下这方面的资料研究一下吧。很容易的。

将 id="bg" 这个 div 的 style（样式）中的 position（位置）设置为 relative（相对），

然后在里面加一个 div 写文字，将它的 position 设置为 absolute（绝对），调整 top 和 left 来改变它的显示位置。

把 div 替换为下面这样

<div id="bg" style="position: relative">

<div id="text" style="position: absolutetop: 100pxleft: 200px"><p>添加文字</p></div>

<img src="图片地址自己换上" alt="HIGH">

</div>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">

<title>无标题文档</title>

<script>

function vg(){document.getElementById("ce").style.visibility = "hidden"}

function tc(){document.getElementById("ce").style.visibility = "visible"}

function yc(){document.getElementById("ce").style.visibility = "hidden"}

</script>

</head>

<body onLoad="vg()">

<img src="images/whiteBg.png" width="306" height="263" onMouseMove="tc()" onMouseOut="yc()">

<div id="ce" style="position:absolutewidth:297pxheight:23pxz-index:1left: 12pxtop: 246px">图片说明</div>

</body>

</html>

这个是鼠标放在图片上就显示出图片说明。很简单。只是把其中的图片替换成你本机上的图片即可。