Newbie asking for Help :(

Koia · Nov 5, 2008

Hi all,im new here

I started working on a website and i want the graphical menu to have image rollover effects,but i have no clue how to do this in imageready. I tried to find some tutorials but most only show me how to make 'loose' images with coding. I really -have- to know how to do it in Imageready though. I would so appreciate it if anyone could help me out,im feeling rather desperate

(what i mean is an imagemap with a rollover effect made in imageready)

The second problem is that the people i make this site for want to be able to access the content easily so they can add/edit text and pictures themselves after the site is done. They dont know anything about html or anything and i really dont know what i can do to make it easier for them.
They really mean something like what you get on freewebs.com for example,where you get to type in text in some sort of easy-to-use-editor. I dont really feel like making it too difficult for myself though! Isnt there some (free) php script i can use for this purpose? i Know there has to be,i just cant find it!

Thanks in advance,
Koia -xxx-

cmjvulavala · Nov 5, 2008

I dont fully understand the first part of your post... but if you want to make a menu with rollover images for each menu item then that involves XHTML, CSS and possibly Javascript... I'm not that familiar with ImageReady so I wouldnt know if there was a way to automate that :S

As for the second part, it sounds like you need a Content Management System (CMS), most will have easy to use text editors in order to post articles to your site and then you can allow certain users to post new articles, news items etc.
There are loads of CMS's out there... a quick search on Google will bring up plenty.
Some of the main CMS's are Drupal, Xoops, Joomla

Koia · Nov 5, 2008

thanks for the reply

i allready figured out how to make the rollovers in imageready,it involved alot of puzzling but now i have another problem.. It automaticly put all the coding in tables while i first expected it would create an imageready scripting file (like the one you get when you use imagemaps)
I dont have a clue how to make the rollover table menu blend in with my allready excisting tables.
I tried to do this but now it looks all messed up,like with huge gaps between and certainly not the way its supposed to look.

here is the coding i used for it to look like this:
http://img87.imageshack.us/img87/9761/notgoodad4.jpg

Code:

<html>
<head>
<title>Via Mi - Eerste keus uit 2e hand</title>

<link rel="stylesheet" type="text/css" href="stylesheet.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Preload Script (testproject.psd) -->
<script type="text/javascript">
<!--

function newImage(arg) {
	if (document.images) {
		rslt = new Image();
		rslt.src = arg;
		return rslt;
	}
}

function changeImages() {
	if (document.images && (preloadFlag == true)) {
		for (var i=0; i<changeImages.arguments.length; i+=2) {
			document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
		}
	}
}

var preloadFlag = false;
function preloadImages() {
	if (document.images) {
		testproject_01_over = newImage("images/testproject_01-over.jpg");
		testproject_02_over = newImage("images/testproject_02-over.jpg");
		testproject_03_over = newImage("images/testproject_03-over.jpg");
		testproject_04_over = newImage("images/testproject_04-over.jpg");
		testproject_05_over = newImage("images/testproject_05-over.jpg");
		testproject_06_over = newImage("images/testproject_06-over.jpg");
		testproject_07_over = newImage("images/testproject_07-over.jpg");
		testproject_08_over = newImage("images/testproject_08-over.jpg");
		preloadFlag = true;
	}
}

// -->
</script>
<!-- End Preload Script -->

</head>

<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginheight="0" marginwidth="0" onload="preloadImages();">


<table width="788" height="100%" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td height="195" colspan="5"><img src="top.jpg" width="788" height="195" border="0"></td>
</tr>

<tr> 
<td valign="top" width="13" background="leftbg.jpg"><img src="lefttop.jpg" width="13" height="483" border="0"></td>
</tr>

<td>
			<a href="#"
				onmouseover="changeImages('testproject_01', 'images/testproject_01-over.jpg'); return true;"
				onmouseout="changeImages('testproject_01', 'images/testproject_01.jpg'); return true;"
				onmousedown="changeImages('testproject_01', 'images/testproject_01-over.jpg'); return true;"
				onmouseup="changeImages('testproject_01', 'images/testproject_01-over.jpg'); return true;">
				<img name="testproject_01" src="images/testproject_01.jpg" width="128" height="67" border="0" alt=""></a></td>
	</tr>
	<tr>
		<td>
			<a href="#"
				onmouseover="changeImages('testproject_02', 'images/testproject_02-over.jpg'); return true;"
				onmouseout="changeImages('testproject_02', 'images/testproject_02.jpg'); return true;"
				onmousedown="changeImages('testproject_02', 'images/testproject_02-over.jpg'); return true;"
				onmouseup="changeImages('testproject_02', 'images/testproject_02-over.jpg'); return true;">
				<img name="testproject_02" src="images/testproject_02.jpg" width="128" height="58" border="0" alt=""></a></td>
	</tr>
	<tr>
		<td>
			<a href="#"
				onmouseover="changeImages('testproject_03', 'images/testproject_03-over.jpg'); return true;"
				onmouseout="changeImages('testproject_03', 'images/testproject_03.jpg'); return true;"
				onmousedown="changeImages('testproject_03', 'images/testproject_03-over.jpg'); return true;"
				onmouseup="changeImages('testproject_03', 'images/testproject_03-over.jpg'); return true;">
				<img name="testproject_03" src="images/testproject_03.jpg" width="128" height="59" border="0" alt=""></a></td>
	</tr>
	<tr>
		<td>
			<a href="#"
				onmouseover="changeImages('testproject_04', 'images/testproject_04-over.jpg'); return true;"
				onmouseout="changeImages('testproject_04', 'images/testproject_04.jpg'); return true;"
				onmousedown="changeImages('testproject_04', 'images/testproject_04-over.jpg'); return true;"
				onmouseup="changeImages('testproject_04', 'images/testproject_04-over.jpg'); return true;">
				<img name="testproject_04" src="images/testproject_04.jpg" width="128" height="59" border="0" alt=""></a></td>
	</tr>
	<tr>
		<td>
			<a href="#"
				onmouseover="changeImages('testproject_05', 'images/testproject_05-over.jpg'); return true;"
				onmouseout="changeImages('testproject_05', 'images/testproject_05.jpg'); return true;"
				onmousedown="changeImages('testproject_05', 'images/testproject_05-over.jpg'); return true;"
				onmouseup="changeImages('testproject_05', 'images/testproject_05-over.jpg'); return true;">
				<img name="testproject_05" src="images/testproject_05.jpg" width="128" height="58" border="0" alt=""></a></td>
	</tr>
	<tr>
		<td>
			<a href="#"
				onmouseover="changeImages('testproject_06', 'images/testproject_06-over.jpg'); return true;"
				onmouseout="changeImages('testproject_06', 'images/testproject_06.jpg'); return true;"
				onmousedown="changeImages('testproject_06', 'images/testproject_06-over.jpg'); return true;"
				onmouseup="changeImages('testproject_06', 'images/testproject_06-over.jpg'); return true;">
				<img name="testproject_06" src="images/testproject_06.jpg" width="128" height="58" border="0" alt=""></a></td>
	</tr>
	<tr>
		<td>
			<a href="#"
				onmouseover="changeImages('testproject_07', 'images/testproject_07-over.jpg'); return true;"
				onmouseout="changeImages('testproject_07', 'images/testproject_07.jpg'); return true;"
				onmousedown="changeImages('testproject_07', 'images/testproject_07-over.jpg'); return true;"
				onmouseup="changeImages('testproject_07', 'images/testproject_07-over.jpg'); return true;">
				<img name="testproject_07" src="images/testproject_07.jpg" width="128" height="59" border="0" alt=""></a></td>
	</tr>
	<tr>
		<td>
			<a href="#"
				onmouseover="changeImages('testproject_08', 'images/testproject_08-over.jpg'); return true;"
				onmouseout="changeImages('testproject_08', 'images/testproject_08.jpg'); return true;"
				onmousedown="changeImages('testproject_08', 'images/testproject_08-over.jpg'); return true;"
				onmouseup="changeImages('testproject_08', 'images/testproject_08-over.jpg'); return true;">
				<img name="testproject_08" src="images/testproject_08.jpg" width="128" height="64" border="0" alt=""></a></td>
	



</td> 

<td valign="top" width="15" background="middlebg.jpg"><img src="middletop.jpg" width="15" height="483" border="0"></td>


<td valign="top" width="612" background="content.jpg">

<p>This is the content area. Yay!!</p>

</td>

<td valign="top" width="20" background="rightbg.jpg"><img src="righttop.jpg" width="20" height="483" border="0"></td>
</tr>
<tr>
<td height="49" colspan="5"><img src="bottom.jpg" width="788" height="49" border="0"></td>
</tr> 
</table>  

</body>
</html>

and this is what its SUPPOSED to look like:
http://img370.imageshack.us/img370/2933/viamifinalmp8.jpg

tickey · Jan 4, 2009

you are lucky, man

you are getting good solutions.

Newbie asking for Help :(

Koia

New Member

cmjvulavala

New Member

Koia

New Member

tickey

New Member