...

View Full Version : How Do I Make Text Highlightable Where A JPG Contains The Text In CSS?



BBoyRisk
01-04-2007, 09:27 PM
Hello and happy new year everybody.

A friend of mine did a website for another friend but the text which is in Chinese is not highlightable, which is what the friend recieving the website wanted and now wants me to correct. The text is being represented within a jpg.

The website uses CSS which I am not too familiar with. I have rewritten the text from the jpg into notepad so it is ready to be copied into the script which I have tried but I do not get the desired result of just replacing the text from the jpg with real text.

How would I go about inserting the text and using the current jpg as the background. I thought it would be quite easy or maybe I have overlooked something but I cannot get the desired result. I did see a similar problem asked on here and I tried to follow it but it seemed to be quite specific to that problem.

Any help would be greatly appreciated!




I only need to fix one page and from there I can make (small) adjustments to the rest of the site; the page in question is www.ilsmusic.cn/index.shtml and the jpg in question is "home_r4_c3.jpg":

Here is the script:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ilsmusic</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.style8 {font-family: verdana; font-size: 9px; color: #999999; }
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onLoad="MM_preloadImages('home/images/splash_r4_c4_f2.jpg')">
<table width="913" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><table border="0" cellpadding="0" cellspacing="0" width="913">
<!-- fwtable fwsrc="background resize.png" fwbase="home.jpg" fwstyle="Dreamweaver" fwdocid = "1846891105" fwnested="1" -->
<tr>
<td>&nbsp;</td>
<td><table border="0" cellpadding="0" cellspacing="0" width="913">
<!-- fwtable fwsrc="background resize.png" fwbase="home.jpg" fwstyle="Dreamweaver" fwdocid = "1846891105" fwnested="1" -->
<tr>
<td colspan="3"><table border="0" cellpadding="0" cellspacing="0" width="913">
<!-- fwtable fwsrc="splash.png" fwbase="splash.jpg" fwstyle="Dreamweaver" fwdocid = "1846891105" fwnested="1" -->
<tr>
<td colspan="4"><table border="0" cellpadding="0" cellspacing="0" width="913">
<!-- fwtable fwsrc="splash.png" fwbase="splash.jpg" fwstyle="Dreamweaver" fwdocid = "1846891105" fwnested="1" -->
<tr>
<td colspan="2"><img name="splash_r1_c1" src="home/images/splash_r1_c1.jpg" width="729" height="87" border="0" alt=""></td>
<td rowspan="4"><img name="splash_r1_c3" src="home/images/splash_r1_c3.jpg" width="15" height="563" border="0" alt=""></td>
<td rowspan="3"><img name="splash_r1_c4" src="home/images/splash_r1_c4.jpg" width="169" height="504" border="0" alt=""></td>
</tr>
<tr>
<td><img name="splash_r2_c1" src="home/images/splash_r2_c1.jpg" width="179" height="400" border="0" alt=""></td>
<td><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="550" height="400">
<param name="movie" value="images/splash1.swf">
<param name=quality value=high>
<embed src="images/splash1.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="550" height="400"></embed>
</object></td>
</tr>
<tr>
<td colspan="2"><img name="splash_r3_c1" src="home/images/splash_r3_c1.jpg" width="729" height="17" border="0" alt=""></td>
</tr>
<tr>
<td colspan="2"><img name="splash_r4_c1" src="home/images/splash_r4_c1.jpg" width="729" height="59" border="0" alt=""></td>
<td><a href="http://www.sonicwand.com" target="_top" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('splash_r4_c4','','home/images/splash_r4_c4_f2.jpg',1);"><img name="splash_r4_c4" src="home/images/splash_r4_c4.jpg" width="169" height="59" border="0" alt=""></a></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
<td>&nbsp;</td>
</tr>
</table></td>
</tr>
<tr>
<td><div align="left"><span class="style8">&copy;2006 ilsmusic - All rights reserved. ilsmusic terms &amp; conditions apply. Site created and Managed by Sonicwand Web Solutions &copy;1998-2006 . <a href="http://www.ilsmusic.cn/index.shtml">Skip Intro</a> </span></div></td>
</tr>
</table>
</body>
</html>

Troy297
01-04-2007, 09:37 PM
Its actually a fairly easy solution.... I couldn't see where exactly you wanted to have the text and image background but the code would look something like this...


<style type="text/css">
div {
background: url(img.jpg);
}
</style>

<div>
text goes here
</div>

Just customize the "img.jpg" and the "div" to fit your needs!

Note: Next time use the "[ CODE ][ /CODE ]" tags for your HTML.

Arbitrator
01-04-2007, 09:38 PM
This is simple:


CSS:
div {
background-image: url("image.jpeg")
}

HTML:
<div lang="zh">
Chinese text
</div>

You will, of course, have to remove the text from the background image itself, instead putting real text on top of it.

Nevermind. scriptz revised his post to basically match mine.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum