Safari: img within a link object?

[zoookapi]

I'm attempting to dynamically add a link so I can take a mouseover
action on it and am having problems in Safari (this works fine in
Firefox and IE (Windows version of IE)). When I add the img object it
shows fine, but when I try to contain it within a link, it does not
display. I've tried using the IE and non-IE method below but neither
seem to work. Is this a bug in Safari or is there a different way to
achieve this? I was testing with Safari 1.3.2 on OS X 10.3.x

if (!isIE) {
oldImage = document.createElement("img");
oldImage.src = value;
oldImage.title = "";
newImage = document.createElement("link");
newImage.appendChild(oldImage);
} else {
newImage = document.createElement("<img src='" + value + " '
title='" + "" + "'>");
}
newImage.onmouseover = function(){
takeAction();
};
newImage.onmouseout = function(){
takeAction();
}

Thanks,
Steve

 

[Gérard Talbot]

I'm attempting to dynamically add a link so I can take a mouseover
action on it and am having problems in Safari (this works fine in
Firefox and IE (Windows version of IE)). When I add the img object it
shows fine, but when I try to contain it within a link, it does not
display. I've tried using the IE and non-IE method below but neither
seem to work. Is this a bug in Safari or is there a different way to
achieve this? I was testing with Safari 1.3.2 on OS X 10.3.x

if (!isIE) {

Modern ways to detect browsers involve only object/features detection:
this method is more reliable and easier to implement and easier to manage.

Developing Cross Browser/Cross Platform Pages
http://www.mozilla.org/docs/web-developer/upgrade_2.html#DevCrossBrowser

Browser identification approach (aka "browser sniffing"): not best, not
reliable approach
http://www.mozilla.org/docs/web-developer/upgrade_2.html#BrowserIdent

Using Object/Feature detection approach: best and overall most reliable
http://www.mozilla.org/docs/web-developer/upgrade_2.html#ObjectFeatDetect

A Strategy That Works: Object/Feature Detecting by comp.lang.javascript
newsgroup FAQ notes
http://jibbering.com/faq/faq_notes/not_browser_detect.html#bdFD

Browser detection - No; Object detection - Yes by Peter-Paul Koch
http://www.quirksmode.org/js/support.html

oldImage = document.createElement("img");
oldImage.src = value;
oldImage.title = "";
newImage = document.createElement("link");

This way of defining variables is weird and not recommendable (from a
debugging perspective, reviewing by others, reusing code, etc.): the
variable identifier says it's a new image but the execution only
involves the creation of a link. So, it's misleading.

newImage.appendChild(oldImage);

} else {
newImage = document.createElement("<img src='" + value + " '
title='" + "" + "'>");
}
newImage.onmouseover = function(){
takeAction();
};
newImage.onmouseout = function(){
takeAction();
}

Thanks,
Steve

Ok. I think I understand what you're trying to do here.

Try this:

if (document.createElement)
{
var oldImage = document.createElement("img");
oldImage.width = 100; // change that value
oldImage.height = 50; // change that value
oldImage.src = value;
oldImage.alt = "[some descriptive text]";

var objLink = document.createElement("a");
objLink.href = "[path]/filename.ext"; // change accordingly that
value
objLink.onmouseover = new Function ("evt", "takeAction()");
objLink.onmouseout = new Function ("evt", "takeAction()");
objLink.appendChild(oldImage);
}

Gérard

 

[Stephen Chalmers]

I'm attempting to dynamically add a link so I can take a mouseover
action on it and am having problems in Safari (this works fine in
Firefox and IE (Windows version of IE)). When I add the img object it
shows fine, but when I try to contain it within a link, it does not
display. I've tried using the IE and non-IE method below but neither
seem to work. Is this a bug in Safari or is there a different way to
achieve this? I was testing with Safari 1.3.2 on OS X 10.3.x

if (!isIE) {
oldImage = document.createElement("img");
oldImage.src = value;
oldImage.title = "";
newImage = document.createElement("link");
newImage.appendChild(oldImage);
} else {
newImage = document.createElement("<img src='" + value + " '
title='" + "" + "'>");
}
newImage.onmouseover = function(){
takeAction();
};
newImage.onmouseout = function(){
takeAction();
}

Are you sure you meant to create a '<link>' element rather than an <a>?

Are you appending the link element to anything?

Does this test do the sort of thing you wanted?

<html>
<body>
<script type="text/javascript"/">

function makePicLink(parentElem, onFunc, outFunc, addr, pic)
{
var aLink, clickImg;

aLink=document.createElement('a');
aLink.href=addr;
aLink.onmouseover=onFunc;
aLink.onmouseout=outFunc;
parentElem.appendChild( aLink );

clickImg=document.createElement('img');
clickImg.src=pic;
aLink.appendChild( clickImg );

}

makePicLink(document.body, function(){document.bgColor='#ff8000'},
function(){document.bgColor='#ffffff'}, '#', 'smiley.gif' );

</script>
</body>
</html>

 

[ASM]

(e-mail address removed) a écrit :

Is this a bug in Safari or is there a different way to
achieve this? I was testing with Safari 1.3.2 on OS X 10.3.x

if (!isIE) {
oldImage = document.createElement("img");
oldImage.src = value;
oldImage.title = "";
newImage = document.createElement("link");

newImage = document.createElement("A");

did you ever see a tag 'link' in body ?

 

[ASM]

Gérard Talbot a écrit :

Modern ways to detect browsers involve only object/features detection:
this method is more reliable and easier to implement and easier to manage.

if you want to keep IE away you want to keep IE away !

isIE = false; /*@cc_on isIE=true; @*/

any need of complications

Try this:

OK that works in my IE (5.2 Mac)

But I have a problem with this IE
if I do :

var inpoot = document.createElement("input");
inpoot.type = 'text';

my IE stops here : "type is read only" does it clam.

How would you detect this soup ?

if (document.createElement)
{
var oldImage = document.createElement("img");
oldImage.width = 100; // change that value
oldImage.height = 50; // change that value
oldImage.src = value;
oldImage.alt = "[some descriptive text]";

var objLink = document.createElement("a");
objLink.href = "[path]/filename.ext"; // change accordingly that
value
objLink.onmouseover = new Function ("evt", "takeAction()");
objLink.onmouseout = new Function ("evt", "takeAction()");
objLink.appendChild(oldImage);
}