Iframe and imagemap links - anyone know?

[glitterr]

Iframe - Unlinkable

Hi everyone!!
So I'm having this iframe on my website with javascript scrollbuttons outside of it, (Example)

Links wont open in the iframe, but in a full window. I have tried including target="Iframename" in the link code, but it does not work. (EDIT: Scratch the imagemap stuff, it just complicates things. So now its just links)

Do I need some other code, javascript prehaps? Or is it just not possible at all?


Code for my links to open in the iframe called datamain (does not work right):

<a href="http://www.Test.php" target="datamain">Test.php</a>

Code for the iframe (works):

<!--Scrollable iframe script- By Dynamic Drive-->
<!--For full source code and more DHTML scripts, visit http://www.dynamicdrive.com-->
<!--This credit MUST stay intact for use-->

<iframe id="datamain" src="http://indextest.php" width=250 height=250 marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=0 scrolling=no></iframe>

<layer visibility=hide>
<div style="width:250px;" align="right">
<a href="#" onMouseover="scrollspeed=-4" onMouseout="scrollspeed=0"><img src="http://Up.png" border="0"></a> | <a href="#" onMouseover="scrollspeed=4" onMouseout="scrollspeed=0"><img src="http://Down.png" border=0></a>
</div>
</layer>

Code for bottom of pages thats supposed to load inside the iframe (works):

<!--DO NOT REMOVE BELOW SCRIPT. IT SHOULD ALWAYS APPEAR AT THE VERY END OF YOUR CONTENT-->

<script language="JavaScript1.2">

//Scrollable content III- By http://www.dynamicdrive.com

var speed, currentpos=curpos1=0,alt=1,curpos2=-1

function initialize(){
if (window.parent.scrollspeed!=0){
speed=window.parent.scrollspeed
scrollwindow()
}
}

function scrollwindow(){
temp=(document.all)? document.body.scrollTop : window.pageYOffset
alt=(alt==0)? 1 : 0
if (alt==0)
curpos1=temp
else
curpos2=temp

window.scrollBy(0,speed)
}

setInterval("initialize()",10)

</script>

Thank you very much for any help! :bowdown:

 

[Scoochi2]

Your links are looking for a frame named "datamain", but you don't actually have such a frame...

The iframe you have put in has an id of "datamain", but you'll need to actually name it as well.
Just replace the one line in your code for iframe to the following:

<iframe name="datamain" id="datamain" src="http://indextest.php" width=250 height=250 marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=0 scrolling=no></iframe>

Still looking for imagemap help?

 

[glitterr]

Your links are looking for a frame named "datamain", but you don't actually have such a frame...

The iframe you have put in has an id of "datamain", but you'll need to actually name it as well.
Just replace the one line in your code for iframe to the following:

<iframe name="datamain" id="datamain" src="http://indextest.php" width=250 height=250 marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=0 scrolling=no></iframe>

Still looking for imagemap help?

Ooohh!! That explains alot
I thought [ iframe id="Name" ] was the same as [ iframe name="Name" ], but only for a different kind of iframe. But I understand now.

Thank you so much! It was really starting to annoy me :biggrin:

As for the imagemap I got it figured out. It was just me thinking that it was because of the imagemap I couldn't get the [ target="IframeName" ] links to work.. He he.

The only thing would be how to add rollover images that cover only the field with the link, and not like the entire main image.
Because when I try it the rollover image streches to cover the entire main image.. I thought I knew this kind of things but guess not. :ugh:

Do you have any idea how this is possible?

 

[misson]

I thought [ iframe id="Name" ] was the same as [ iframe name="Name" ], but only for a different kind of iframe. But I understand now.

The tricky thing is sometimes they are treated the same. For <a> elements (and thus fragment identifiers), name and id share the same namespace. The difference here is that name attribute values can contain some characters that ids can't. This means you shouldn't have two different elements where the id of one is the same as the name of the other. If at all possible, the name and id should match.

Even though the statement in the HTML4 spec that says name and id share the same namespace is within the context of the <a> element, some implementors read this as name and id share the same namespace for all attributes. In Safari, for instance, your sample code worked because setting the id attribute is sufficient. This brings out an important guideline: when asking for help, always state the environment for your issue, such as which browsers suffer from the problem.

The only thing would be how to add rollover images that cover only the field with the link, and not like the entire main image.
Because when I try it the rollover image streches to cover the entire main image.. I thought I knew this kind of things but guess not. :ugh:

Do you have any idea how this is possible?

Styling image maps won't get you anywhere, so you have a couple alternatives:

• Use JS rollover to add an image (or image slice) to the link region. There are better ways.
• Position elements in front of the image and style those when the mouse hovers over them. At this point, you may as well drop the image map.
• Position a list of links over a background image. Use pure CSS rollovers on the links. This is the best approach because it provides the cleanest separation of structure and presentation and doesn't require you to define behavior (i.e. use JS). Read "CSS Sprites: Image Slicing’s Kiss of Death" on A List Apart.