PDA

View Full Version : Image Ready Rollovers In frontpage



KITT
06-22-2006, 05:06 PM
Hi I can't get these rollovers to work for me. I use FrontPage and I have placed the the rollovers HERE (http://www.wellpublished.com/rollover.htm)

THE PROBLEM IS THAT THE ROLLOVERS work there but when I use them as included content on my hompage (http://www.wellpublished.com) they doesn't work. They don't rollover or anything.

I hope Somebody Can help me. I have tried to post this in other forums but Have had no replies

djr33
06-22-2006, 08:49 PM
Might just be frontpage being weird.
You're using an adobe product then a microsoft product... they may be conflicting.

You're using frontpage to include them? You could try php includes, perhaps. They might work better than what frontpage does to your scripts.

KITT
06-23-2006, 12:27 AM
Yeah I actually had a feeling that, that was what was wrong, but i hoped that i could get around it with the use of some code.

But can any of you guys recommend another program. I'm not very good at HTML so anything were i can work in design mode like frontpage would be good. I have heard about Dreamweaver and Adobe GoLive but never used em, you think my image rollovers would work there.

And what would you recommend and if any whihch og them is closet to frontpage.

Twey
06-23-2006, 01:13 AM
But can any of you guys recommend another program.Vim (http://www.vim.org/).
I'm not very good at HTMLLearn. It's hardly rocket science.
so anything were i can work in design mode like frontpage would be good.WYSIWYG editors are flawed in concept, and it really requires human pattern-detection and understanding of content to understand how and where to use which tags.

djr33
06-23-2006, 01:32 AM
Certainly if you are going to use WYSIWYG, don't use two from different companies, or at least not one from Microsoft and another from something else.

Dreamweaver and Fireworks are supposted to be integrated.... though I don't like fireworks too much.

Image Ready and Dreamweaver have worked well for me in the past.

In the end, though, learning HTML is the right route. Immediately, try DW.

simonf
06-23-2006, 11:43 AM
Hi Guys... when I looked at the page it seemed a hell of a lot of code for something seemingly very simple.

I reproduced the same effect (in FrontPage(very easy)) with the following code:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<script language="JavaScript">
<!--
function FP_swapImg() {//v1.0
var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
elm.$src=elm.src; elm.src=args[n+1]; } }
}

function FP_preloadImgs() {//v1.0
var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
}

function FP_getObjectByID(id,o) {//v1.0
var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
return null;
}

function FP_swapImgRestore() {//v1.0
var doc=document,i; if(doc.$imgSwaps) { for(i=0;i<doc.$imgSwaps.length;i++) {
var elm=doc.$imgSwaps[i]; if(elm) { elm.src=elm.$src; elm.$src=null; } }
doc.$imgSwaps=null; }
}

function FP_goToURL(url) {//v1.0
window.location=url;
}
// -->
</script>
</head>

<body onload="FP_preloadImgs(/*url*/'images/home-down.gif', /*url*/'images/home_over.gif')">

<table border="0" width="100%" id="table1" cellspacing="0" cellpadding="0">
<tr>
<td width="113">
<img border="0" src="images/home_normal.gif" width="113" height="21" id="img1" style="cursor:hand; cursor:pointer" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img1',/*url*/'images/home_over.gif')" onclick="FP_goToURL(/*href*/'index.htm')" onmousedown="FP_swapImg(1,1,/*id*/'img1',/*url*/'images/home-down.gif')"></td>
<td>&nbsp;</td>
</tr>
</table>

</body>

</html>

And it works 100%... all you are doing is swapping the image and on click swapping again and going to another url.... does not sound like a big deal unless I've missed the point as usual....

KITT
06-23-2006, 02:57 PM
I always appreciate when people reply to my posts. But if you read my post it says that the page you were editing were working fine. The problem was when I went on to include the rollovers on my homepage. Then they don't work.

djr33
06-23-2006, 09:08 PM
Again, frontpage is bad. It is almost surely stripping something when it includes one page in the other.
As such, do it by hand, use another program, etc.

Twey
06-23-2006, 09:12 PM
It does, it strips everything except the contents of the body tag.

djr33
06-23-2006, 09:49 PM
Oh, well that's absolutely the issue then.

Conclusion: don't use front page :p

simonf
06-24-2006, 07:28 AM
Weird.. as I never have this issue with FrontPage..... and it's all I use... it's what I started with and use all the time. I see what gets stripped (below) however my point was not working or not working. It was rather the amount of code for the same basic thing!!!

Missing on your home page seems to be:

<script type="text/javascript">
<!--

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

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

function changeImages() {
changeImagesArray(changeImages.arguments);
}

function toggleImages() {
for (var i=0; i<toggleImages.arguments.length; i+=2) {
if (selected == toggleImages.arguments[i]) changeImagesArray(toggleImages.arguments[i+1]);
}
}

var selected = '';
var preloadFlag = false;
function preloadImages() {
if (document.images) {
Home_over = newImage("images/Home-over.gif");
Home_down = newImage("images/Home-down.gif");
Home_sel = newImage("images/Home-sel.gif");
eZine_over = newImage("images/eZine-over.gif");
eZine_down = newImage("images/eZine-down.gif");
eZine_sel = newImage("images/eZine-sel.gif");
Articles_over = newImage("images/Articles-over.gif");
Articles_down = newImage("images/Articles-down.gif");
Articles_sel = newImage("images/Articles-sel.gif");
Contact_down = newImage("images/Contact-down.gif");
Contact_over = newImage("images/Contact-over.gif");
Contact_sel = newImage("images/Contact-sel.gif");
preloadFlag = true;
}
}

// -->
</script>

Twey
06-24-2006, 07:38 AM
I see what gets stripped (below) however my point was not working or not working. It was rather the amount of code for the same basic thing!!!Agreed... DreamWeaver does this too.
[FrontPage is] all I use... it's what I started with and use all the time.I don't think I really have to say anything. Do I? :)

simonf
06-24-2006, 07:48 AM
Well I could be using notepad!!! I know I know.... I'm an old soul...I like change but I just find FP easy... what can I say ;)

Twey.. what did you think of the amount of code used.. vs a simple solution to the same request...???

Twey
06-24-2006, 08:05 AM
Twey.. what did you think of the amount of code used.. vs a simple solution to the same request...???Personally, I'd do something like this:
<script type="text/javascript">
var base = 0;
var NAME = base++,
OVER = base++,
PRESSED = base++;

function imageRollover() {
for(var i=0;i<arguments.length;i++) {
(new Image()).src = arguments[i][OVER];
(new Image()).src = arguments[i][PRESSED];
var el = document.images[arguments[i][NAME]];
el.normalSrc = el.src;
el.overSrc = arguments[i][OVER];
el.pressedSrc = arguments[i][PRESSED];
if(el.overSrc) el.onmouseout = function() {
this.src = this.normalSrc;
};
if(el.overSrc) el.onmouseover = function() {
this.src = this.overSrc;
};
if(el.pressedSrc) el.onmousedown = function() {
this.src = this.pressedSrc;
};
if(el.pressedSrc) el.onmouseup = function() {
this.src = this.overSrc || this.normalSrc;
};
}
}
</script>That's somewhat less code, but again, as with FP's, it's designed to be flexible, and there's a considerable amount of bloat involved in that. That's why it's best to create your own code for your own circumstance. :) Depending on exactly what's needed, quite often there's no need to even write any Javascript outside the event handlers of the <img> element.